关于webpack: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 的应用。