Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行。默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置信息对象,或者通过 --config 选项来指定配置文件。

webpack文档:https://webpack.github.io/docs/

1.新建一个文件夹src存放打包前的源文件,dist文件夹存放打包后的文件,新建一个webpack.config.js为webpack的配置文件

打包前的文件夹中的内容

2.新建一个index1.html引用dist下打包后的js

3.输入命令:webpack,即可按照webpack.config.js中的配置项进行编译

4.编译完的文件目录和内容如下

5.如果将webpack.config.js重命名为webpack.dev.config.js,则直接执行默认的webpack命令则会找不到相应的配置文件,需要借助于webpack的--config选项来指定配置文件

命令:webpack --config webpack.dev.config.js

6.如果要查看编译的进度,打包的模块之类的,可以在package.json中的scripts标签内通过webpack的属性值来指定

7.输入命令:npm run webpack,来编译打包

 webpack.config.js中entry值的详细介绍:

https://webpack.github.io/docs/configuration.html#entry

entry的值可以是一个string类型的字符串,也可以是一个数组,还可以是一个json对象

数组:这种情况会将entry定义的数组中的文件内容打包到output中定义的这一个文件

json对象:这种情况适应于多页面时的编译

output属性值介绍:https://webpack.github.io/docs/configuration.html#output

使用命令:npm run webpack,编译打包将会看到在dist/js下生成两个文件

webpack前端构建工具学习总结(三)之webpack.config.js配置文件的更多相关文章

  1. webpack前端构建工具学习总结(二)之loader的使用

    Webpack 本身只能处理 JavaScript 模块,如果要处理其他类型的文件,就需要使用 loader 进行转换. Loader 可以理解为是模块和资源的转换器,它本身是一个函数,接受源文件作为 ...

  2. webpack前端构建工具学习总结(四)之自动化生成项目中的html页面

    接续上文:webpack前端构建工具学习总结(三)之webpack.config.js配置文件 插件的介绍文档:https://www.npmjs.com/package/html-webpack-p ...

  3. webpack前端构建工具学习总结(一)之webpack安装、创建项目

    npm是随nodeJs安装包一起安装的包管理工具,能解决NodeJS代码部署上的很多问题: 常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器 ...

  4. 前端开发自动化工作流工具,JavaScript自动化构建工具grunt、gulp、webpack介绍

    前端开发自动化工作流工具,JavaScript自动化构建工具grunt.gulp.webpack介绍 前端自动化,这样的一个名词听起来非常的有吸引力,向往力.当今时代,前端工程师需要维护的代码变得及为 ...

  5. 前端构建工具gulp使用

    前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gulp中文文档 https://g ...

  6. 前端构建工具gulp

    前端构建工具gulp使用   前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 http://www.gulpjs.com.cn/ Gul ...

  7. 前端构建工具gulp使用 (转)

    http://www.cnblogs.com/starof/p/5194622.html 前端自动化流程工具,用来合并文件,压缩等. Gulp官网 http://gulpjs.com/ Gulp中文网 ...

  8. 前端构建工具之gulp(一)「图片压缩」

    前端构建工具之gulp(一)「图片压缩」 已经很久没有写过博客了,现下终于事情少了,开始写博吧 今天网站要做一些优化:图片压缩,资源合并等 以前一直使用百度的FIS工具,但是FIS还没有提供图片压缩的 ...

  9. 前端构建工具gulpjs的使用介绍及技巧

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速 ...

随机推荐

  1. Game of Peace

    Time Limit: 4000ms, Special Time Limit:10000ms, Memory Limit:65536KB Total submit users: 20, Accepte ...

  2. 1.4-1.5 HBase部署及基本使用

    一.部署 1.准备 ##先用Apache hadoop ##之前的cdh 服务器先全部停掉 ##解压HBASE [root@hadoop-senior hbase]# tar zxf hbase-0. ...

  3. 2.6 hive分区表

    一.背景 ######### 分区表实际上就是对应一个HDFS文件系统上的独立的文件夹,该文件夹下是该分区所有的数据文件. Hive中的分区就是分目录,把一个大的数据集根据业务需要分割成更小的数据集. ...

  4. 1.9 Hive常见属性配置

    一.Hive数据仓库位置配置 1. # Hive数据仓库位置配置: 默认位置(hive根目录): /user/hive/warehouse 注意事项: *在仓库目录下,没有对默认的数据库default ...

  5. python数据分析笔记中panda(2)

    1 将手机号码分开为运营商,地区和号码段 from pandas import read_csv; df = read_csv("H:\\pythonCode\\4.6\\data.csv& ...

  6. TypeScript完全解读(26课时)_18.Mixins混入

    本节的代码在mixin.ts文件内 同时在index.ts内引入 混入就是把两个对象或者类的内容混合到一起,从而实现一些功能复用. 对象混入 js中对象的混入 先来看一个js中对象的混入的例子 首先定 ...

  7. 妙味课堂史上最全的javascript视频教程,前端开发人员必备知识点,新手易学,拔高必备!!!

    妙味课堂是北京妙味趣学信息技术有限公司旗下的IT前端培训品牌, 妙味课堂是一支独具特色的IT培训团队,妙味反对传统IT教育枯燥乏味的教学模式,妙味提供一种全新的快乐学习方法! 妙味js视教第一部分  ...

  8. 2013 Noip提高组 Day1

    3285 转圈游戏 2013年NOIP全国联赛提高组  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题解       题目描述 Description ...

  9. Some JPR highlights (JPR 2019 March)

    Journal Name:Journal of Proteome Research Issue:2019 March Shared by: Weining Zhao 1.     Acetylome: ...

  10. PAT 1040有几个PAT

    原题:https://pintia.cn/problem-sets/994805260223102976/problems/994805282389999616 1040 有几个PAT (25 分) ...