webpack使用六

插件（Plugins）

插件（Plugins）是用来拓展Webpack功能的，它们会在整个构建过程中生效，执行相关的任务。
Loaders和Plugins常常被弄混，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的（JSX，Scss，Less..），一次处理一个，插件并不直接操作单个文件，它直接对整个构建过程其作用。

Webpack有很多内置插件，同时也有很多第三方插件，可以让我们完成更加丰富的功能。

使用插件的方法

const webpack = require('webpack');

module.exports = {

...

    module: {

        rules: [

            {

                test: /(\.jsx|\.js)$/,

                use: {

                    loader: "babel-loader"

                },

                exclude: /node_modules/

            },

            {

                test: /\.css$/,

                use: [

                    {

                        loader: "style-loader"

                    }, {

                        loader: "css-loader",

                        options: {

                            modules: true

                        }

                    }, {

                        loader: "postcss-loader"

                    }

                ]

            }

        ]

    },

    plugins: [

        new webpack.BannerPlugin('版权所有，翻版必究')

    ],

};

通过这个插件，打包后的JS文件显示如下

这就是webpack插件的基础用法了，下面给大家推荐几个常用的插件

HtmlWebpackPlugin

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

安装

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

这个插件自动完成了我们之前手动做的一些事情，在正式使用之前需要对一直以来的项目结构做一些更改：

移除public文件夹，利用此插件，index.html文件会自动生成，此外CSS已经通过前面的操作打包到JS中了。
在app目录下，创建一个index.tmpl.html文件模板，这个模板包含title等必须元素，在编译过程中，插件会依据此模板生成最终的html页面，会自动添加所依赖的 css, js，favicon等文件，index.tmpl.html中的模板源代码如下：

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <title>Webpack Sample Project</title>

  </head>

  <body>

    <div id='root'>

    </div>

  </body>

</html>

　　3.更新webpack的配置文件，方法同上,新建一个build文件夹用来存放最终的输出文件

const webpack = require('webpack');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件

    output: {

        path: __dirname + "/build",

        filename: "bundle.js"

    },

    devtool: 'eval-source-map',

    devServer: {

        contentBase: "./public",//本地服务器所加载的页面所在的目录

        historyApiFallback: true,//不跳转

        inline: true//实时刷新

    },

    module: {

        rules: [

            {

                test: /(\.jsx|\.js)$/,

                use: {

                    loader: "babel-loader"

                },

                exclude: /node_modules/

            },

            {

                test: /\.css$/,

                use: [

                    {

                        loader: "style-loader"

                    }, {

                        loader: "css-loader",

                        options: {

                            modules: true

                        }

                    }, {

                        loader: "postcss-loader"

                    }

                ]

            }

        ]

    },

    plugins: [

        new webpack.BannerPlugin('版权所有，翻版必究'),

        new HtmlWebpackPlugin({

            template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数

        })

    ],

};

再次执行npm start你会发现，build文件夹下面生成了bundle.js和index.html。

Hot Module Replacement

Hot Module Replacement（HMR）也是webpack里很有用的一个插件，它允许你在修改组件代码后，自动刷新实时预览修改后的效果。

在webpack中实现HMR也很简单，只需要做两项配置

在webpack配置文件中添加HMR插件；
在Webpack Dev Server中添加“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 = {

    entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件

    output: {

        path: __dirname + "/build",

        filename: "bundle.js"

    },

    devtool: 'eval-source-map',

    devServer: {

        contentBase: "./public",//本地服务器所加载的页面所在的目录

        historyApiFallback: true,//不跳转

        inline: true,

        hot: true

    },

    module: {

        rules: [

            {

                test: /(\.jsx|\.js)$/,

                use: {

                    loader: "babel-loader"

                },

                exclude: /node_modules/

            },

            {

                test: /\.css$/,

                use: [

                    {

                        loader: "style-loader"

                    }, {

                        loader: "css-loader",

                        options: {

                            modules: true

                        }

                    }, {

                        loader: "postcss-loader"

                    }

                ]

            }

        ]

    },

    plugins: [

        new webpack.BannerPlugin('版权所有，翻版必究'),

        new HtmlWebpackPlugin({

            template: __dirname + "/app/index.tmpl.html"//new 一个这个插件的实例，并传入相关的参数

        }),

        new webpack.HotModuleReplacementPlugin()//热加载插件

    ],

};

安装react-transform-hmr

npm install --save-dev babel-plugin-react-transform react-transform-hmr

配置Babel

// .babelrc

{

  "presets": ["react", "es2015"],

  "env": {

    "development": {

    "plugins": [["react-transform", {

       "transforms": [{

         "transform": "react-transform-hmr",

         "imports": ["react"],

         "locals": ["module"]

       }]

     }]]

    }

  }

}

现在当你使用React时，可以热加载模块了,每次保存就能在浏览器上看到更新内容。