在本篇之前的Demo里,我们使用 Webpack 都是在命令行下传入参数执行的。命令行CLI, 即Command Line Interface, 顾名思义,也就是命令行用户界面。(本篇写完之后的第二天,我发现webpack在4.0.1之后分离了命令行工具webpack-cli, 利用webpack-cli init可以初始化一个webpack项目)
Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行。默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置对象,或者通过 –config 选项来指定配置文件。
一、初始化一个package.json
1 | $ npm init |
1 | $ npm i css-loader --save-dev |
打开 package.json
1 | { |
二、 创建webpack.config.js
1 | module.exports = { |
loader 可以看作具有文件转换功能的翻译员,配置里的 module.rules 数组配置了一组规则,告诉 Webpack 在遇到哪些文件时使用哪些 loader 去加载和转换。 如上配置告诉 Webpack 在遇到以 .css 结尾的文件时先使用 css-loader 读取 CSS 文件,再交给 style-loader 把 CSS 内容注入到 JavaScript 里。 在配置 loader 时需要注意的是:
- use 属性的值需要是一个由 Loader 名称组成的数组,Loader 的执行顺序是由后到前的;
- 每一个 loader 都可以通过 URL querystring 的方式传入参数,例如 css-loader?minimize 中的 minimize 告诉 css-loader 要开启 CSS 压缩。
最后运行 webpack,可以看到 webpack 通过配置文件执行的结果和上一篇通过命令行 webpack main.js app.js –module-bind ‘css=style-loader!css-loader’ 执行的结果是一样的。
打包进度过程
打包进度过程
1 | webpack --progress |