Webpack4中的plugins插件与loaders加载器的不同之处在于它们可以执行更广泛的任务。基本上，他们做loaders加载器不能做的任何其他事情。虽然loaders加载器绑定到特定类型的文件，但plugins插件可能更通用。例如生成包含所有资源链接的HTML文件，并将CSS提取为单独的文件。
使用loaders加载器的最基本方法是将它们放入配置的plugins插件属性中。您需要通过使用new运算符调用插件来创建它的实例。
html-webpack-plugin
手动将所有JavaScripts文件添加到HTML中可能很麻烦。还好你不需要这样做！这里一个非常有用的插件是html-webpack-plugin。
npm install html-webpack-pluginwebpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin()
]
};它将为我们创建index.html文件，并将其放到dist目录中。并将javascript文件引用到<body>标签之前。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="main.js"></script>
</body>
</html>这里需要注意的另一个重要问题是，由于哈希值的使用，文件名可能会发生变化。它使的htmlwebpackplugin更加有用，因为您不需要跟踪文件名。引入这个机制是为了处理浏览器处理缓存的方式。
将options选项传递给plugins插件
你还可以将其他options选项传递给插件，如下：
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};多亏了这一点，它将使用您提供的HTML文件，而不是创建默认的HTML文件。要查看更多html-webpack-plugin可用选项，请参阅这里。
多次使用同一插件
你可能想知道为什么我们每次使用插件时都需要使用new关键字。这是因为你可以多次使用同一个插件。例如创建多页面应用程序时，你可能希望输出多个HTML文件。关于Webpack4中的Entry入口、output输出以及如何使用它们创建多个页面应用程序的，请查看这里。
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块数组匹配入口点。运行上述配置将导出：one.html、two.html、one.bundle.js、two.bundle.js。
Plugins插件与loaders加载器一起工作
在上一篇中，我们使用组合的css-loader和style-loader将我们的css代码注入<style>标签。你可能更愿意向用户提供实际的css文件。为此，请使用mini-css-extract-plugin。
在过去，我们使用ExtractTextWebpackPlugin来做到这一点，但是从Webpack 4开始它不应该用于css。了解更多信息，请阅读此问题。
npm install mini-css-extract-pluginwebpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin(),
new MiniCssExtractPlugin()
]
}index.js
import './styles.css';由于htmlwebpackplugin，生成的CSS文件将自动链接到HTML。你最终会得到这样的输出：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
<link href="main.css" rel="stylesheet"></head>
<body>
<script type="text/javascript" src="main.js"></script></body>
</html>使用此配置运行webpack将为每个包含CSS导入的JavaScript文件创建一个CSS文件。
