Webpack有很多內置插件，同時也有很多第三方插件，可以讓我們完成很多豐富的功能。
如果我們需要在webpack中引入插件時，首先我們需要npm/cnpm安裝需要的插件(內置插件不用安裝)，其次要在webpack配置文件webpack.config.js中的plugins關鍵字部分添加該插件的一個實例去配置這個插件，需要注意的是：“plugins是一個數組”。
這里就以添加一個版本聲明的插件為例，在webpack.config.js中配置版本說明。
本文以webpack文章的demo為例，如果未閱讀上文，并且想了解完整過程請點擊回到上文
const webpack = require('webpack'); // 引入webpack
module.exports = {
...
// 配置插件
plugins: [
new webpack.BannerPlugin('版權所有，翻版必究')
]
}
這里要注意的是，如果我們需要用到插件時，在配置文件中的頭部必須要引入webpack，然后下面才可以用這個插件
如果不在頭部引入webpack那么打包會報下列錯：
接下來我們來看看正確打包后的結果：
打包后的js文件中會出現我們添加的版權字樣。
HtmlWebpackPlugin
這個插件的作用是依據一個簡單的index.html模板，生成一個自動引用你打包后的JS文件的新index.html。這在每次生成的js文件名稱不同時非常有用（比如添加了hash值）。
安裝
npm install --save-dev html-webpack-plugin
這個插件會自動完成我們之前手動做的一些事情。
接下來我們要修改我們的項目讓插件自動幫我們生成文件
- 移除common文件夾中的所有文件，利用此插件，index.html文件會自動生成，此外CSS已經通過前面的操作打包到JS中了。
-
在app目錄下，創建一個index.tmpl.html文件模板，這個模板包含html、head、body等必須元素，在編譯過程中，插件會依據此模板生成最終的html頁面，會自動添加所依賴的 css, js，favicon等文件。
修改后的項目目錄和index.tmpl.html中的模板源代碼如下：
image.png
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpackDemo</title>
</head>
<body>
<div id='root'>
</div>
</body>
</html>
- 更新webpack的配置文件
webpack.config.js
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入插件
module.exports = {
...
plugins: [
new webpack.BannerPlugin('版權所有，翻版必究'),
new HtmlWebpackPlugin({
//new 一個這個插件的實例，并傳入相關的參數
template: __dirname + "/app/index.tmpl.html"
})
]
}
注意別忘記引入插件
- 再次執行
npm start你會發現，common文件夾下面生成了index.js和index.html。
image.png
Hot Module Replacement
Hot Module Replacement（HMR）也是webpack里很有用的一個插件，它允許你在修改組件代碼后，自動刷新實時預覽修改后的效果。
在webpack中實現HMR也很簡單，只需要做如下兩項配置：
- 在webpack配置文件中添加HMR插件；
- 在webpack配置文件的
devServer字段中添加“hot”參數；
不過配置完這些后，JS模塊其實還是不能自動熱加載的，還需要在你的JS模塊中執行一個Webpack提供的API才能實現熱加載，雖然這個API不難使用，但是如果是React模塊，使用我們已經熟悉的Babel可以更方便的實現功能熱加載。
具體實現方法如下
Babel和Webpack是獨立的工具
- 二者可以一起工作
- 二者都可以通過插件拓展功能
- HMR是一個webpack插件，它讓你能瀏覽器中實時觀察模塊修改后的效果，但是如果你想讓它工作，需要對模塊進行額外的配額；
- Babel有一個叫做
react-transform-hrm的插件，可以在不對React模塊進行額外的配置的前提下讓HMR正常工作；
下面我們在配置文件中添加如下代碼：
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
...
devServer: {
contentBase: "./common", // 本地服務器所加載的頁面所在的目錄
historyApiFallback: true, // 不跳轉
inline: true, // 實時刷新
hot: true // 在這里配置hot
},
...
plugins: [
new webpack.BannerPlugin('版權所有，翻版必究'),
new HtmlWebpackPlugin({
//new 一個這個插件的實例，并傳入相關的參數
template: __dirname + "/app/index.tmpl.html"
}),
new webpack.HotModuleReplacementPlugin() // 熱加載插件
]
}
接下來安裝react-transform-hmr
npm install --save-dev babel-plugin-react-transform
npm install --save-dev react-transform-hmr
配置Babel
在.babelrc文件中修改如下代碼：
{
"presets": ["react", "env"],
"env": {
"development": {
"plugins": [["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}]
}]]
}
}
}
現在去使用npm run server運行demo，之后當你使用React時，可以熱加載模塊了,每次保存就能在瀏覽器上看到更新內容。
