Webpack 3.X - 4.X 升级记录

朴灿烈づ我的快乐病毒、 2022-05-30 00:42 245阅读 0赞

先升级 `webpack-cli`

**首先：执行命令**

npm install webpack-cli -D
    或者
    npm install -g yarn
    yarn add webpack-cli -D

#### **启动服务出现的问题** ####

**问题1**：`compilation.mainTemplate.applyPluginsWaterfall is not a function`  
![示例图1][1]  
暂时解决方案：

yarn add webpack-contrib/html-webpack-plugin -D

相关讨论解决方案，[在这里][Link 1]

--------------------

**问题2：`Use Chunks.groupsIterable and filter by instanceof Entrypoint instead`**

![示例图2][2]

解决方案： 去除，require(‘extract-text-webpack-plugin’)的引用

--------------------

**问题3**：`webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.`

![示例3][3]

目前，4.0中已经删除`CommonsChunkPlugin`，替换成了`splitChunks`，[这里有相关介绍内容][Link 2]

解决方案： 去除 `new webpack.optimize.CommonsChunkPlugin`，修改为

optimization: { runtimeChunk: { name: "manifest" },
        splitChunks: { cacheGroups: { commons: { test: /[\\/]node_modules[\\/]/, name: "vendor", chunks: "all" }
            }
        }
    }

即可！

`optimization`参数介绍：

optimization: {
        splitChunks: {
          chunks: "initial",         // 必须三选一： "initial" | "all"(默认就是all) | "async"
          minSize: 0,                // 最小尺寸，默认0
          minChunks: 1,              // 最小 chunk ，默认1
          maxAsyncRequests: 1,       // 最大异步请求数， 默认1
          maxInitialRequests: 1,    // 最大初始化请求书，默认1
          name: () => {},              // 名称，此选项课接收 function
          cacheGroups: {                 // 这里开始设置缓存的 chunks
            priority: "0",                // 缓存组优先级 false | object |
            vendor: {                   // key 为entry中定义的 入口名称
              chunks: "initial",        // 必须三选一： "initial" | "all" | "async"(默认就是异步)
              test: /react|lodash/,     // 正则规则验证，如果符合就提取 chunk
              name: "vendor",           // 要缓存的 分隔出来的 chunk 名称
              minSize: 0,
              minChunks: 1,
              enforce: true,
              maxAsyncRequests: 1,       // 最大异步请求数， 默认1
              maxInitialRequests: 1,    // 最大初始化请求书，默认1
              reuseExistingChunk: true   // 可设置是否重用该chunk（查看源码没有发现默认值）
            }
          }
        }
      },

==最后，optimization 使用相关内容在这里==

[CommonsChunkPlugin][]

[https://news.aotu.io/a/5a7b53d3d50eee0042c20c0c?utm\_medium=lite02\_web&utm\_source=aotu\_io][https_news.aotu.io_a_5a7b53d3d50eee0042c20c0c_utm_medium_lite02_web_utm_source_aotu_io]

--------------------

**问题4：警告**

![示例4][4]

警告提示，表示 在启动服务的时候没有指定`mode`

在 package.json 中加上`--mode development`或者`--mode production`即可，如下示例：

"scripts": {
      "dev": "webpack --mode development",
      "build": "webpack --mode production"
    }

--------------------

最后，贴上我的`webpack.config.js`配置：

var webpack = require('webpack'),
        path = require('path'),
        HtmlWebpackPlugin = require('html-webpack-plugin'),
        //ExtractTextPlugin = require('extract-text-webpack-plugin'), 4.0弃用
        ip = require('ip'),
        CleanPlugin = require('clean-webpack-plugin'),
        c = require('./config/packConfig'),
        HashedModuleIdsPlugin = require('./config/HashedModuleIdsPlugin'),
        BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin,
        Visualizer = require('webpack-visualizer-plugin'),
        HappyPack = require('happypack'),
        CopyWebpackPlugin = require('copy-webpack-plugin'),
        CompressionPlugin = require('compression-webpack-plugin');
    
    
    const resolve = dir => {
        return path.join(__dirname, c.cf.entry.module, dir)
    }
    
    module.exports = {
        entry: {
            app: resolve("/components/app.js"),
            vendor: c.cf.entry.vendor,
        },
        output: {
            path: resolve(c.cf.output.path),
            publicPath: '',
            filename: "assets/js/[name]" + env + ".js",
            chunkFilename: "chunk/[name]" + env + ".js",
            library: 'library',
            libraryTarget: 'umd',
            umdNamedDefine: true
        },
        devServer: {
            inline: true,
            open: true,
            port: c.cf.server.port,
            compress: true,
            host: ip.address(),
            progress: true,
            historyApiFallback: true,
            contentBase: "./",
            https: false,
            proxy: c.prox
        },
        //4.0配置
        optimization: {
            /*splitChunks: {
                chunks: 'all',//"initial" | "async" | "all"
                cacheGroups: {
                    default: false,
                    vendors: false,
                },
            },*/
            /*splitChunks: {
                cacheGroups: {
                    commons: {
                        test: /[\\/]node_modules[\\/]/,
                        name: "vendor",
                        chunks: "all"
                    }
                }
            }*/
            runtimeChunk: {
                name: "manifest"
            },
            splitChunks: {
                cacheGroups: {
                    commons: {
                        test: /[\\/]node_modules[\\/]/,
                        name: "vendor",
                        chunks: "all"
                    }
                }
            }
        },
    
        resolveLoader: {
            moduleExtensions: ['-loader']
        },
    
        module: {
            //4.0之前是 loaders,现在修改为 rules
            rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
            }, {
                test: /\.vue$/,
                exclude: /node_modules/,
                loader: 'vue',
            }, {
                test: /\.(css|less)$/,
                exclude: /node_modules/,
                loader: "style!css!less"
            }, {
                test: /\.(html|tpl)$/,
                exclude: /node_modules/,
                loader: 'html'
            }, {
                test: /\.jsx$/,
                exclude: /node_modules/,
                loaders: ['jsx', 'babel']
            }],
            noParse: /jquery|lodash/,
    
            unknownContextRegExp: /$^/,
            unknownContextCritical: false,
    
            exprContextRegExp: /$^/,
            exprContextCritical: false,
    
            wrappedContextRegExp: /$^/,
            wrappedContextCritical: false,
    
        },
        plugins: [
            new HtmlWebpackPlugin({
                filename: 'index.html',
                template: resolve('/components/index.html')
            }),
            new HashedModuleIdsPlugin(),
            /* //4.0 删除 CommonsChunkPlugin模块，改为splitChunks
             * new webpack.optimize.CommonsChunkPlugin({
                name: 'vendor'
            }),
            new webpack.optimize.CommonsChunkPlugin({
                name: 'manifest',
                chunks: ['vendor'],
            }),
            /* //4.0报错   Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
             new ExtractTextPlugin({
                filename: 'assets/css/[name].css',
                allChunks: true 
            }),*/
            new CompressionPlugin({
                asset: '[path].gz[query]',
                algorithm: 'gzip',
                test: new RegExp('\\.(js|css)$'),
                threshold: 50240,
                minRatio: 0.8
            }),
            //new webpack.NoErrorsPlugin(), 
            new webpack.optimize.OccurrenceOrderPlugin(),
            new CleanPlugin(["*"], {
                "root": resolve(c.cf.output.path),
                verbose: true,
                dry: false
            }),
            new webpack.HotModuleReplacementPlugin()
        ]
    };

--------------------

参考资料：

[1、webpack 4.0更新内容][1_webpack 4.0]

[1]: /images/20220530/a28ac7d9a98441c19a32d829d0d207cd.png
[Link 1]: https://github.com/jantimon/html-webpack-plugin/issues/841
[2]: /images/20220530/04e06502f2144f058757faace4fb026d.png
[3]: /images/20220530/df3ed9806ed24ecaa9484c134e2a2d0a.png
[Link 2]: https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
[CommonsChunkPlugin]: https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693?utm_source=aotu_io&utm_medium=liteo2_web
[https_news.aotu.io_a_5a7b53d3d50eee0042c20c0c_utm_medium_lite02_web_utm_source_aotu_io]: https://news.aotu.io/a/5a7b53d3d50eee0042c20c0c?utm_medium=lite02_web&utm_source=aotu_io
[4]: /images/20220530/978d7c1ad73642dd85d861b3b008a977.png
[1_webpack 4.0]: https://github.com/webpack/webpack/releases/tag/v4.0.0-beta.0?utm_source=aotu_io&utm_medium=liteo2_web