• webpack4.x最详细使用讲解二


    六、插件(Plugins)

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

    6.1 插件如何使用

    使用某个插件,需要通过npm进行安装,然后在webpack.config.js配置文件的plugins(是一个数组)配置项中添加该插件的实例,下面我们先来使用一个简单的版权声明插件。

    // 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和其他配置的影响,后面代码分离的时候我们再处理)。

  • 相关阅读:
    阿里云Centos 8.2安装LNMP环境
    TP6中缓存的使用
    TP6中命令行
    TP6中请求和响应
    TP6模型操作
    TP6中数据库操作
    TP6中验证器的使用
    TP6如何使用文件上传
    3. Longest Substring Without Repeating Characters
    1. Two Sum
  • 原文地址:https://www.cnblogs.com/samve/p/12386725.html
Copyright © 2020-2023  润新知