Open felix-cao opened 6 years ago
在本篇之前的 Demo 里,我们使用 Webpack 都是在命令行下传入参数执行的。命令行CLI, 即Command Line Interface, 顾名思义,也就是命令行用户界面。
Demo
Webpack
CLI
Command Line Interface
本篇写完之后的第二天,我发现 webpack 在 4.0.1 之后分离了命令行工具 webpack-cli, 利用 webpack-cli init 可以初始化一个webpack 项目)
webpack
webpack-cli init
Webpack 在执行的时候,除了在命令行传入参数,还可以通过指定的配置文件来执行。默认情况下,会搜索当前目录的 webpack.config.js 文件,这个文件是一个 node.js 模块,返回一个 json 格式的配置对象,或者通过 --config 选项来指定配置文件。
webpack.config.js
node.js
json
--config
$ npm init
安装两个 loader
loader
$ npm i css-loader --save-dev $ npm i style-loader --save-dev
打开 package.json, 发现 css-loader 和 style-loader 已经在 devDependencies 里了。
package.json
css-loader
style-loader
devDependencies
{ "name": "config", "version": "1.0.0", "description": "A simple webpack example for config", "main": "main.js", "scripts": { "test": "echo \\\"Error: no test specified\\\" && exit 1" }, "keywords": [ "webpack" ], "author": "Felix", "license": "MIT", "devDependencies": { "css-loader": "^0.28.10", "style-loader": "^0.20.2", "webpack": "^4.0.1" } }
module.exports = { entry: './main.js', output: { path: __dirname, filename: 'app.js' }, module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader?minimize'], } ] } }
loader 可以看作具有文件转换功能的翻译员,配置里的 module.rules 数组配置了一组规则,告诉 Webpack 在遇到哪些文件时使用哪些 loader 去加载和转换。
module.rules
如上配置告诉 Webpack 在遇到以 .css 结尾的文件时先使用 css-loader 读取 CSS 文件,再交给 style-loader 把 CSS 内容注入到 JavaScript 里。
.css
CSS
JavaScript
在配置 loader 时需要注意的是:
use
Loader
URL querystring
css-loader?minimize
minimize
最后运行 webpack,可以看到 webpack 通过配置文件执行的结果和上一篇通过命令行 webpack main.js app.js --module-bind 'css=style-loader!css-loader' 执行的结果是一样的。
webpack main.js app.js --module-bind 'css=style-loader!css-loader'
打包进度过程
webpack --progress
在本篇之前的
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
安装两个
loader
打开
package.json
, 发现css-loader
和style-loader
已经在devDependencies
里了。二、 创建 webpack.config.js
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'
执行的结果是一样的。三、 打包进度过程
打包进度过程