Webpack 4 教程 - 3 . 使用插件
Hello！ 今天我们介绍插件的概念。某种程度上来说，与加载器不同的是插件能够处理更大范围内的任务。基本上，它们能做加载器不能做的任何事情。加载器往往囿于一定类型的文件，而插件就普适得多了。这一回我们将学习loader（译注：原文如此，理应为plugins）服务的目的以及如何使用它们。我们将触及到一个真实的例子，这个例子中我们生成带有资源链接的HTML文件，以及抽离css到分离的文件中。
Webpack 4 教程： 插件，如何使用？
use loaders（译注： 原文如此，理应为 use plugins）最基本的方式是把它们放到我们的配置的plugins属性中。你需要调用new操作符来生成一个插件的实例。
如果你要对new关键字及原型了解更多，请参阅Prototype. The big bro behind ES6 classhtml-webpack-plugin
手工在HTML中添加JavaScripts文件很是繁琐。谢天谢地，你并不必这么做！这里有一个叫HtmlWebpackPlugin的很好用的插件。
npm install html-webpack-plugin
非常容易使用：
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin()
]
};这将给我们创建一个index.html文件，并把其放在dist目录中。我们输出的javascript代码将链接在<body>标签的尾部。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="main.js"></script></body>
</html>这就方便了，尤其在你的文件数增长得越来越多的时候。因为（手工的话）你不得不跟踪每个文件并将它们放到HTML中。
另外一个重要的事情就是在使用hash的情况下，你的文件名可以被更改。这让HtmlWebpackPlugin变得更有用了，因为你不必跟踪文件名了。引入这个机制是为了应付浏览器的缓存（效应）。在接下来的教程中，我们将更多的覆盖这个主题。
给插件传递可选参数
你可以给插件传递可选参数。这里有一个给HtmlWebpackPlugin传递模板（template）可选项的例子：
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};这样，就不再创建一个默认的HTML文件了，而是使用你提供的。了解更多可选参数的意义，请参考仓库。
多次使用同一个插件
你可能想知道每次使用插件时为什么要用new关键字。这是因为使得你能多次使用同一个插件这一事实。
当创建多页应用时，你可能需要输出多个HTML文件。
如果你想了解更多的如何通过入口和输出来创建多页应用，请参阅本教程的第1部分为此，可通过多次使用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属性的值与入口点来匹配。运行上面这个配置将生成这些文件： one.html,
two.html, one.bundle.js, two.bundle.js.
插件与加载器一块工作
在上一节的教程中，我们结合css-loader和style-loader把css代码插入到<style>标签里。你可能更喜欢给你的用户提供一个实际的css文件。要这么做，使用mini-css-extract-plugin.
在Webpack版本4以前，我们使用ExtractTextWebpackPlugin插件来做这件事，但从4开始，不这么干了，想知道得更多请参读issue。你要这么做：
npm install mini-css-extract-plugin
// webpack.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中。你最终会得到如下的输出：
<!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文件都导入它。要改变这种行为需要使用SplitChunksPlugin插件，我们在后面部分的教程中涉及它。你可以在官方文档找到如何这么做的说明。
小结
今天我们涉及到了loaders（译注：原文如此，理应为plugins，我再次疑惑）是什么，以及学习了使用它们的基本方式。不只如此，我们也学习了如何给它们传递附加选项参数，以及如何让其与加载器协同工作。尽管这里只是举了一个插件的例子，但使用其它插件都是类似的。更多可用的插件请参阅官方的插件列表。这个列表太多了，使用搜索引擎去找吧。因为webpack自己本身也是建立在同样插件系统之上的，了解其底层如何工作是件有趣的事情。我们将在以后实现一个我们自己的插件。