(六)插件（Plugins）
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时，可以热加载模块了,每次保存就能在浏览器上看到更新内容。
