Webpack 入门五：配置文件

[felix-cao]

在本篇之前的 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

$ npm init

安装两个 loader

$ npm i css-loader --save-dev
$ npm i style-loader --save-dev

打开 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"
  }
}

二、 创建 webpack.config.js

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 去加载和转换。

如上配置告诉 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' 执行的结果是一样的。

三、 打包进度过程

打包进度过程

webpack --progress