芒格先生，您一年讀幾本書？芒格：噢，他們知道我喜歡書，送給我許多書。我一周讀二十本書，我有許多書，什么類型的書都看。
今天我們要來介紹一個新的概念——plugins。相比于 loaders， plugins 能夠完成的任務會更多。通常它們都會做那些 loaders 做不了的事情。loaders 更多的是和文件的處理綁定在一起的概念，而 plugins 則更加寬泛一點。這次我們會學到為何使用以及如何使用它們。我們會用一些實際的例子來說明，比如生成鏈接了所有相關的 HTML 文件以及將 CSS 放到單獨的文件中。
如何使用？
使用 plugins 最直觀的方法就是講它們放在配置文件中的 plugins 屬性下，你需要通過調(diào)用 new 操作符來創(chuàng)建一個插件的實例。
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()
]
};
這個插件會幫助我們創(chuàng)建一個 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 添加參數(shù)
除了直接使用 plugins，你還可以給它們添加一些參數(shù)，一個簡單的例子就是你可以將模板作為參數(shù)傳遞給 HtmlWebpackPlugin:
webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
plugins: [
new HtmlWebpackPlugin({template: './src/index.html'})
]
}
這樣，我們就可以自己指定嵌入 JavaScript 的 HTML 文件，而不是創(chuàng)建默認的文件了。要了解更多可以使用的參數(shù)，可以參考這里
多次使用同樣的 plugin
你可能很好奇，為什么我們在使用 plugin 的時候會需要 new 一個 plugin 對象呢？這是因為，這樣就可以多次使用同一個插件了。
當創(chuàng)建一個多頁面的應用時，你可能需要輸出不止一個 HTML 文件。
如果你想了解更多關于 entry 和 output 的知識，并且弄明白如何使用它們創(chuàng)建多頁面應用的話，你可以參考一下這個系列的第一篇文章。
通過多次使用 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 添加額外的參數(shù)，以及如何與 loaders 搭配使用。盡管只用到了兩個 plugins，但是其他的插件用法也大致如此，如果你需要更多滿足你需要的 plugins，可以到這個官方列表中進行搜索。
閑言碎語
最近做的比較滿意的一件事就是把公司項目里上傳文件的模塊給摸熟悉了，雖然還不能說能達到重寫的程度，但是把上傳文件功能從 Backbone 的 view 中剝離出來，方便在 React 中使用，這樣還是挺開心的~算是完成了當時在寫任務導入時想到的一個小小的 idea。
頭疼的是最近在寫樹狀結構的組件，發(fā)現(xiàn)對于數(shù)據(jù)結構和算法掌握的太薄弱了，寫起代碼來有點書到用時方恨少的捉襟見肘 ??，不過現(xiàn)在已經(jīng)有點起色了，能實現(xiàn)一些簡單的功能，還是要多看別人代碼，而且得多思考。
很想像喬架一樣，什么時候能對別人的代碼有自己獨到的見解，知道哪里還可以改進，哪里還可以寫得更好。??ヾ(?°?°?)??
