Photo by TOMOKO UJI on Unsplash
芒格先生，您一年读几本书？芒格：噢，他们知道我喜欢书，送给我许多书。我一周读二十本书，我有许多书，什么类型的书都看。
今天我们要来介绍一个新的概念——plugins。相比于 loaders， plugins 能够完成的任务会更多。通常它们都会做那些 loaders 做不了的事情。loaders 更多的是和文件的处理绑定在一起的概念，而 plugins 则更加宽泛一点。这次我们会学到为何使用以及如何使用它们。我们会用一些实际的例子来说明，比如生成链接了所有相关的 HTML 文件以及将 CSS 放到单独的文件中。
如何使用？
使用 plugins 最直观的方法就是讲它们放在配置文件中的 plugins 属性下，你需要通过调用 new 操作符来创建一个插件的实例。
html-webpack-plugin
像之前我们那样手动的向 html 中添加 JavaScript 文件是不是有点笨重？显得傻傻的？很幸运的是，你不需要那么做了，因为有一个插件解决了这个问题：HtmlWebpackPlugin。
首先我们安装这个插件：
$ npm install html-webpack-plugin
使用起来也很方便：
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin()
]
};
这个插件会帮助我们创建一个 index.html 文件，并放在 dist 文件夹下，而通过 Webpack 输出的 JavaScript 代码会被加在 <body> 的底部。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Cola Frontend</title>
</head>
<body>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
当你的文件开始变多，你就不得不开始维护它们，而且要把它们一个不漏的加到 HTML 文件中，这时候 HtmlWebpackPlugin 就显得很方便了。
给 plugins 添加参数
除了直接使用 plugins，你还可以给它们添加一些参数，一个简单的例子就是你可以将模板作为参数传递给 HtmlWebpackPlugin:
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
}
这样，我们就可以自己指定嵌入 JavaScript 的 HTML 文件，而不是创建默认的文件了。要了解更多可以使用的参数，可以参考这里
多次使用同样的 plugin
你可能很好奇，为什么我们在使用 plugin 的时候会需要 new 一个 plugin 对象呢？这是因为，这样就可以多次使用同一个插件了。
当创建一个多页面的应用时，你可能需要输出不止一个 HTML 文件。
如果你想了解更多关于 entry 和 output 的知识，并且弄明白如何使用它们创建多页面应用的话，你可以参考一下这个系列的第一篇文章。
通过多次使用 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 array 来匹配对应的接入点，运行这个配置文件会生成一下的文件：one.html, two.html, one.bundle.js, two.bundle.js.
组合使用 plugins 与 loaders
在上一篇文章中，我们将 css-loader 和 style-loader 进行结合，将我们的 css 代码注入到了 <style> 标签中。不过，你也许更倾向于将真正的 css 文件传给你的用户们，那么你需要用到的就是另一个插件：mini-css-extract-plugin。
首先安装这个插件：
$ 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 文件里，你可以得到以下的输出：
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>
小结
今天我们学习了什么是 plugin，还有它的一些基本用法。不仅如此，还知道了如何对 plugins 添加额外的参数，以及如何与 loaders 搭配使用。尽管只用到了两个 plugins，但是其他的插件用法也大致如此，如果你需要更多满足你需要的 plugins，可以到这个官方列表中进行搜索。
闲言碎语
最近做的比较满意的一件事就是把公司项目里上传文件的模块给摸熟悉了，虽然还不能说能达到重写的程度，但是把上传文件功能从 Backbone 的 view 中剥离出来，方便在 React 中使用，这样还是挺开心的~算是完成了当时在写任务导入时想到的一个小小的 idea。
头疼的是最近在写树状结构的组件，发现对于数据结构和算法掌握的太薄弱了，写起代码来有点书到用时方恨少的捉襟见肘 😔，不过现在已经有点起色了，能实现一些简单的功能，还是要多看别人代码，而且得多思考。
很想像乔架一样，什么时候能对别人的代码有自己独到的见解，知道哪里还可以改进，哪里还可以写得更好。🆙ヾ(◍°∇°◍)ﾉﾞ
网友评论