webpack4.x最详细使用讲解二

六、插件（Plugins）

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

6.1 插件如何使用

// webpack.config.js
const webpack = require('webpack');  // 这个插件不需要安装，是基于webpack的，需要引入webpack模块

module.exports = {
    ...
    module: {
        rules: [
            {
                test: /\.css$/,   // 正则匹配以.css结尾的文件
                use: ['style-loader', 'css-loader']  // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的
            },
            {
                test: /\.(scss|sass)$/,   // 正则匹配以.scss和.sass结尾的文件
                use: ['style-loader', 'css-loader', 'sass-loader']  // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的
            },
            {                             // jsx配置
                test: /(\.jsx|\.js)$/,   
                use: {                    // 注意use选择如果有多项配置，可写成这种对象形式
                    loader: "babel-loader"
                },
                exclude: /node_modules/   // 排除匹配node_modules模块
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究')  // new一个插件的实例 
    ]
}

运行npm run build打包后我们看到bundle.js文件显示如下：

6.2 自动生成html文件(HtmlWebpackPlugin)

到目前为止我们都是使用一开始建好的index.html文件，而且也是手动引入bundle.js，要是以后我们引入不止一个js文件，而且更改js文件名的话，也得手动更改index.html中的js文件名，所以能不能自动生成index.html且自动引用打包后的js呢？HtmlWebpackPlugin插件就是用来解决这个问题的：

首先安装该插件

cnpm i html-webpack-plugin -D

然后我们对项目结构进行一些更改：

把dist整个文件夹删除；

在src文件夹下新建一个index.template.html(名称自定义)文件模板（当然这个是可选的，因为就算不设置模板，HtmlWebpackPlugin插件也会生成默认html文件，这里我们设置模块会让我们的开发更加灵活），如下：

<!-- index.template.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Here is Template</title>
  </head>
  <body>
    <div id='root'>
    </div>
  </body>
</html>

webpack.config.js中我们引入了HtmlWebpackPlugin插件，并配置了引用了我们设置的模板，如下：

// webpack.config.js
const path = require('path');  // 路径处理模块
const webpack = require('webpack');  // 这个插件不需要安装，是基于webpack的，需要引入webpack模块
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 引入HtmlWebpackPlugin插件

module.exports = {
    entry: path.join(__dirname, "/src/index.js"), // 入口文件
    output: {
        path: path.join( __dirname, "/dist"), //打包后的文件存放的地方
        filename: "bundle.js" //打包后输出文件的文件名
    },
    devServer: {
        contentBase: "./dist", // 本地服务器所加载文件的目录
        port: "8088",  // 设置端口号为8088
        inline: true, // 文件修改后实时刷新
        historyApiFallback: true, //不跳转
    },
    devtool: 'source-map',  // 会生成对于调试的完整的.map文件，但同时也会减慢打包速度
    module: {
        rules: [
            {
                test: /\.css$/,   // 正则匹配以.css结尾的文件
                use: ['style-loader', 'css-loader']  // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的
            },
            {
                test: /\.(scss|sass)$/,   // 正则匹配以.scss和.sass结尾的文件
                use: ['style-loader', 'css-loader', 'sass-loader']  // 需要用的loader，一定是这个顺序，因为调用loader是从右往左编译的
            },
            {                             // jsx配置
                test: /(\.jsx|\.js)$/,   
                use: {                    // 注意use选择如果有多项配置，可写成这种对象形式
                    loader: "babel-loader"
                },
                exclude: /node_modules/   // 排除匹配node_modules模块
            }
        ]
    },
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究'),  // new一个插件的实例 
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "/src/index.template.html")// new一个这个插件的实例，并传入相关的参数
        })
    ]
}

然后我们使用npm run build进行打包，你会发现，dist文件夹和html文件都会自动生成，如下：

为什么会自动生成dist文件夹呢？因为我们在output出口配置项中定义了出口文件所在的位置为dist文件夹，且出口文件名为bundle.js，所以HtmlWebpackPlugin会自动帮你在index.html中引用名为bundle.js文件，如果你在webpack.config.js文件中更改了出口文件名，index.html中也会自动更改该文件名，这样以后修改起来是不是方便多了？

6.3 清理/dist文件夹(CleanWebpackPlugin)

你可能已经注意到，在我们删掉/dist文件夹之前，由于前面的代码示例遗留，导致我们的/dist文件夹比较杂乱。webpack会生成文件，然后将这些文件放置在/dist文件夹中，但是webpack无法追踪到哪些文件是实际在项目中用到的。

通常，在每次构建前清理/dist文件夹，是比较推荐的做法，因此只会生成用到的文件，这时候就用到CleanWebpackPlugin插件了。

cnpm i clean-webpack-plugin -D

// webpack.config.js
...
const CleanWebpackPlugin = require('clean-webpack-plugin'); // 引入CleanWebpackPlugin插件

module.exports = {
    ...
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究'),  // new一个插件的实例 
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "/src/index.template.html")// new一个这个插件的实例，并传入相关的参数
        }),
        new CleanWebpackPlugin(['dist']),  // 所要清理的文件夹名称
    ]
}

插件的使用方法都是一样的，首先引入，然后new一个实例，实例可传入参数。

现在我们运行npm run build后就会发现，webpack会先将/dist文件夹删除，然后再生产新的/dist文件夹。

6.4 热更新(HotModuleReplacementPlugin)

HotModuleReplacementPlugin（HMR）是一个很实用的插件，可以在我们修改代码后自动刷新预览效果。

方法：

devServer配置项中添加hot: true参数。

因为HotModuleReplacementPlugin是webpack模块自带的，所以引入webpack后，在plugins配置项中直接使用即可。

// webpack.config.js
...
const webpack = require('webpack');  // 这个插件不需要安装，是基于webpack的，需要引入webpack模块

module.exports = {
    ...
    devServer: {
        contentBase: "./dist", // 本地服务器所加载文件的目录
        port: "8088",  // 设置端口号为8088
        inline: true, // 文件修改后实时刷新
        historyApiFallback: true, //不跳转
        hot: true // 热更新
    },
    ...
    plugins: [
        new webpack.BannerPlugin('版权所有，翻版必究'),  // new一个插件的实例 
        new HtmlWebpackPlugin({
            template: path.join(__dirname, "/src/index.template.html")// new一个这个插件的实例，并传入相关的参数
        }),
        new CleanWebpackPlugin(['dist']),  // 传入所要清理的文件夹名称
        new webpack.HotModuleReplacementPlugin() // 热更新插件 
    ]
}

此时我们重新启动项目npm run dev后，修改hello.js的内容，会发现浏览器预览效果会自动刷新（也许反应会比较慢，因为我们使用了source-map和其他配置的影响，后面代码分离的时候我们再处理）。

posted @ 2020-02-29 22:39 Samve 阅读(184) 评论(0) 编辑收藏举报

刷新页面返回顶部

Samve

webpack4.x最详细使用讲解二

公告