Webpack 4 系列 - plugins

Photo by TOMOKO UJI on Unsplash

芒格先生，您一年读几本书？芒格：噢，他们知道我喜欢书，送给我许多书。我一周读二十本书，我有许多书，什么类型的书都看。

今天我们要来介绍一个新的概念——plugins。相比于 loaders， plugins 能够完成的任务会更多。通常它们都会做那些 loaders 做不了的事情。loaders 更多的是和文件的处理绑定在一起的概念，而 plugins 则更加宽泛一点。这次我们会学到为何使用以及如何使用它们。我们会用一些实际的例子来说明，比如生成链接了所有相关的 HTML 文件以及将 CSS 放到单独的文件中。

如何使用？

使用 plugins 最直观的方法就是讲它们放在配置文件中的 plugins 属性下，你需要通过调用 new 操作符来创建一个插件的实例。

html-webpack-plugin

像之前我们那样手动的向 html 中添加 JavaScript 文件是不是有点笨重？显得傻傻的？很幸运的是，你不需要那么做了，因为有一个插件解决了这个问题：HtmlWebpackPlugin。

首先我们安装这个插件：

$ npm install html-webpack-plugin

使用起来也很方便：
webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin()
  ]
};

这个插件会帮助我们创建一个 index.html 文件，并放在 dist 文件夹下，而通过 Webpack 输出的 JavaScript 代码会被加在 的底部。

index.html

当你的文件开始变多，你就不得不开始维护它们，而且要把它们一个不漏的加到 HTML 文件中，这时候 HtmlWebpackPlugin 就显得很方便了。

给 plugins 添加参数

除了直接使用 plugins，你还可以给它们添加一些参数，一个简单的例子就是你可以将模板作为参数传递给 HtmlWebpackPlugin:

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
}

这样，我们就可以自己指定嵌入 JavaScript 的 HTML 文件，而不是创建默认的文件了。要了解更多可以使用的参数，可以参考这里

多次使用同样的 plugin

你可能很好奇，为什么我们在使用 plugin 的时候会需要 new 一个 plugin 对象呢？这是因为，这样就可以多次使用同一个插件了。

当创建一个多页面的应用时，你可能需要输出不止一个 HTML 文件。

如果你想了解更多关于 entry 和 output 的知识，并且弄明白如何使用它们创建多页面应用的话，你可以参考一下这个系列的第一篇文章。

通过多次使用 HtmlWebpackPlugin 就可以做得到。

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: {
    one: './src/one.js',
    two: './src/two.js',
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'one.html',
      template: './src/one.html',
      chunks: ['one']
    }),
    new HtmlWebpackPlugin({
      filename: 'two.html',
      template: './src/two.html',
      chunks: ['two']
    })
  ]
};

插件的实例会基于 chunks array 来匹配对应的接入点，运行这个配置文件会生成一下的文件：one.html, two.html, one.bundle.js, two.bundle.js.

组合使用 plugins 与 loaders

在上一篇文章中，我们将 css-loader 和 style-loader 进行结合，将我们的 css 代码注入到了