转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。原文出处：https://wanago.io/2018/07/23/webpack-4-course-part-three-working-with-plugins/
大家好！今天我们介绍插件这个概念。插件与loader的不同之处在于它能完成更复杂的任务。基本上，loader做不了的其他事情，就可以用插件来做。loader往往作用于某种特定类型的文件，而插件则更加通用。这次，我们来学习如何使用插件，看看它解决了什么问题。本文会涉及一些日常用例，比如，生成链接了所有资源的HTML，以及把CSS抽取为单独的文件。
Webpack 4教程 - 第三部分 如何使用插件
使用插件最基本的方法是把它们放在配置文件中的plugins属性下。你需要调用new操作符创建一个插件的实例。
若想知道更多关于new关键字和原型的，请查看原型，ES6 class背后的大哥。
html-webpack-plugin
手动的把所有JavaScript文件添加到HTML里是件很繁重的事情。幸好你不必那样做！这有一个非常有用的插件HtmlWebpackPlugin。
npm install html-webpack-plugin
它使用起来很方便：
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin()
]
};
它将会为我们在dist文件夹下面创建index.html文件。我们的JavaScript文件会以链接形式插入在
标签后面。你需要自己追踪插入HTML的文件，而当它们变多时，这就很繁琐了。此插件则简化了这件事情。
另一件值得注意的重要事情就是，你的外链文件名可能会因为打包时使用哈希而改变。这就让HtmlWebpackPlugin更加有用了，因为你不需要手动追踪那些文件名。这个机制被用来应对浏览器的缓存。我们会在后面的课程讨论这个话题。
给插件传递配置
你可以给插件传递更多的配置。下面是一个为HtmlWebpackPlugin传入一个HTML模板的例子：
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
};
有了它，插件就不再使用默认的HTML文件，而会使用你提供给它的那个。 可以在这个库看到更多的配置项。
把同一个插件使用多次
你可能会好奇，为什么我们每次使用插件，都要用new新建一个实例。这是因为你能够不止一次地使用同一个插件。
当创建多页面应用时，你可能需要不止一个HTML模板文件。
如果你想了解更多关于entry和output的内容，以及如何使用它们创建多文件应用，可参考我们的第一节课。
这可以通过多次使用HtmlWebpackPlugin来实现。
// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
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数组对入口点（entry point）进行匹配。根据上面的配置运行Webpack，会得到：one.html，tow.html，one.bundle.js，two.bundle.js。
插件和loader并用
在之前的教程里，我们把css-loader和style-loader结合起来，并把输出的css代码插入