轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。原文出處：https://wanago.io/2018/07/23/webpack-4-course-part-three-working-with-plugins/ 大家好！今天我們介紹插件這個概念。插件與l ...
轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文出處：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文件會以鏈接形式插入在<body>標簽後面。
你需要自己追蹤插入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代碼插入<style>標簽。你可能傾向於輸出真正的css的文件給用戶。如果那樣的話，需要使用mini-css-extract-plugin。
在過去，我們曾使用 ExtractTextWebpackPlugin 來做這件事情。但從Webpack 4 開始就不應該再使用它了。若想瞭解更多，參見這裡。
這裡演示了怎麼做：
npm install mini-css-extract-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
entry: './src/style.js',
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin(),
new MiniCssExtractPlugin()
]
}
由於使用了HtmlWepbackPlugin，自動生成的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輸出文件。若想改變這種行為，需要使用SplitChunksPlugin，我們將會在另一個教程里學習它。你也可以在官方文檔里找到操作說明。
總結
今天我們學習了什麼是插件，及其基本使用方法。不僅如此，我們還學習瞭如何給插件傳遞配置項，以及如何將它們與loader一併使用。雖然這裡只是一部分插件的用例，但其他插件的使用方法也是類似的。你可查看官方的插件列表來尋找你需要的插件。你也可以使用搜索引擎去發現更多。Webpack本身就是基於同樣的一套插件系統來構建的，所以學習它們在底層是如何工作的會很有趣。我們將在以後討論這些，屆時去實現我們自己的插件。
