总结18个 webpack 插件，总会有你想要的！

},

//…

plugins: [

new HtmlWebpackPlugin({

template: ‘./public/index.html’,

filename: ‘index.html’, //打包后的文件名

}),

new HtmlWebpackPlugin({

template: ‘./public/login.html’,

filename: ‘login.html’, //打包后的文件名

}),

],

}

如果需要配置多个 HtmlWebpackPlugin，那么 filename 字段不可缺省，否则默认生成的都是 index.html。

但是有个问题，index.html 和 login.html 会发现，都同时引入了 index.f7d21a.js 和 login.f7d21a.js，通常这不是我们想要的，我们希望 index.html 中只引入 index.f7d21a.js，login.html 只引入 login.f7d21a.js。

HtmlWebpackPlugin 提供了一个 chunks 的参数，可以接受一个数组，配置此参数仅会将数组中指定的 js 引入到 html 文件中

module.exports = {

//…

plugins: [

new HtmlWebpackPlugin({

template: ‘./public/index.html’,

filename: ‘index.html’, //打包后的文件名

chunks: [‘index’],

}),

new HtmlWebpackPlugin({

template: ‘./public/login.html’,

filename: ‘login.html’, //打包后的文件名

chunks: [‘login’],

}),

],

}

这样执行 npm run build，可以看到 index.html 中仅引入了 index 的 js 文件，而 login.html 中也仅引入了 login 的 js 文件。

clean-webpack-plugin

---

clean-webpack-plugin 用于在打包前清理上一次项目生成的 bundle 文件，它会根据 output.path 自动清理文件夹；这个插件在生产环境用的频率非常高，因为生产环境经常会通过 hash 生成很多 bundle 文件，如果不进行清理的话每次都会生成新的，导致文件夹非常庞大。

const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’)

plugins: [

new HtmlWebpackPlugin({

template: path.join(__dirname, ‘/index.html’),

}),

new CleanWebpackPlugin(), // 所要清理的文件夹名称

]

extract-text-webpack-plugin

---

将 css 成生文件，而非内联 。该插件的主要是为了抽离 css 样式,防止将样式打包在 js 中引起页面样式加载错乱的现象

const ExtractTextPlugin = require(‘extract-text-webpack-plugin’)

plugins: [

// 将css分离到/dist文件夹下的css文件夹中的index.css

new ExtractTextPlugin(‘css/index.css’),

]

mini-css-extract-plugin

---

将 CSS 提取为独立的文件的插件，对每个包含 css 的 js 文件都会创建一个 CSS 文件，支持按需加载 css 和 sourceMap。只能用在 webpack4 中，对比另一个插件 extract-text-webpack-plugin 有以下特点:

• 异步加载

• 不重复编译，性能更好

• 更容易使用

• 只针对 CSS

这个插件应该只用在生产环境配置，并且在 loaders 链中不使用 style-loader, 而且这个插件暂时不支持 HMR

const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)

module.exports = {

module: {

rules: [

{

test: /.(le|c)ss$/,

use: [

{