(六)插件(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那么打包会报下列错:

image.png

接下来我们来看看正确打包后的结果:
image.png

打包后的js文件中会出现我们添加的版权字样。

HtmlWebpackPlugin

这个插件的作用是依据一个简单的index.html模板,生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用(比如添加了hash值)。
安装

npm install --save-dev html-webpack-plugin

这个插件会自动完成我们之前手动做的一些事情。
接下来我们要修改我们的项目让插件自动帮我们生成文件

  1. 移除common文件夹中的所有文件,利用此插件,index.html文件会自动生成,此外CSS已经通过前面的操作打包到JS中了。
  2. 在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>
  1. 更新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"
        })
    ]
}

注意别忘记引入插件

  1. 再次执行npm start你会发现,common文件夹下面生成了index.jsindex.html
    image.png

Hot Module Replacement

Hot Module Replacement(HMR)也是webpack里很有用的一个插件,它允许你在修改组件代码后,自动刷新实时预览修改后的效果。
在webpack中实现HMR也很简单,只需要做如下两项配置:

  1. 在webpack配置文件中添加HMR插件;
  2. 在webpack配置文件的 devServer字段中添加“hot”参数;

不过配置完这些后,JS模块其实还是不能自动热加载的,还需要在你的JS模块中执行一个Webpack提供的API才能实现热加载,虽然这个API不难使用,但是如果是React模块,使用我们已经熟悉的Babel可以更方便的实现功能热加载。
具体实现方法如下

BabelWebpack是独立的工具

  • 二者可以一起工作
  • 二者都可以通过插件拓展功能
  • 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时,可以热加载模块了,每次保存就能在浏览器上看到更新内容。