webpack 学习笔记（五）：plugins 配置

plugins，是 webpack 中另一个很重要的功能。

为什么要使用 plugins

plugins 的作用就是用来拓展 webpack 功能的，它会在整个项目构建过程中生效，执行相关的任务。

plugins 和 loaders 的区别在于，loaders 是在打包构建过程中用来处理源文件的（例如：JSX、sass、less...）；而 plugins 插件并不直接操作单个文件，而是直接对整个构建过程起作用。

plugins 可用于执行范围更广的任务，如打包优化、资源管理和重新定义环境中的变量等。

plugins 的基本配置

webpack 的配置项中提供了一个 plugins 属性来进行插件的相关配置，该属性的属性值为数组：

module.exports = {
    // loaders
    plugins: []
}

webpack 中所有需要用到的 plugin，都在该数组中依次进行配置。

HtmlWebpackPlugin

这里我们以一个简单的 HtmlWebpackPlugin 插件为例，来学习 webpack 中 plugin 的使用。

HtmlWebpackPlugin 插件的作用主要有两个：

1. 创建生成 html 入口文件；
2. 为 html 文件引入的外部资源，如 CSS、JavaScript；

基本使用

HtmlWebpackPlugin 插件的基本作用就是生成 html 文件，同时可以将 webpack 配置文件中 entry 对应的 js 文件插入到 html 中。

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    plugins: [
        new HtmlWebpackPlugin()
    ]
}

实例化该插件时可以不使用任何参数，当然也可以传一个对象作为参数，通过具体的配置项来定制化一些特殊的需求。

HtmlWebpackPlugin 插件提供的配置项比较多，通过源码可以看出具体的配置项如下：

this.options = _.extend({
    template: path.join(__dirname, 'default_index.ejs'),
    filename: 'index.html',
    hash: false,
    inject: true,
    compile: true,
    favicon: false,
    minify: false,
    cache: true,
    showErrors: true,
    chunks: 'all',
    excludeChunks: [],
    title: 'Webpack App',
    xhtml: false
  }, options);

这里我们就不做复杂的讲解了，先学会 webpack 中 plugin 的基本用法，在后续的章节中我们再来深入去学习每一个常用 plugin 的使用。