webpack从2.5.1升级到4.44.2部分报错解决

1. yarn run clear-cache && yarn run dll && cross-env NODE_ENV=development PROJECT_ENV=background node ./builder/dev-server.js --cfg ./background.config.js

安装cross-env npm install cross-env

2. RemovedPluginError: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

安装 npm install uglifyjs-webpack-plugin 插件 注释代码中UglifyJsPlugin的部分，在配置文件中webpack.dev.conf.js配置：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

optimization: {
        minimizier: [
            new UglifyJsPlugin({
                exclude: /\.min\.js$/,
                cache: true,
                parallel: true,
                sourceMap: false,
                extractComments: false,
                uglifyOptions: {
                    compress: false
                }
            })
        ]
    }

3. RemovedPluginError: webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.

webpack4自带代码分割，注释掉CommonsChunkPlugin相关代码

4. building for production...D:\workSpace\pms-pc\node_modules\happypack\lib\WebpackUtils.js:129 var isWebpack2 = resolve.length === 4; ^

TypeError: Cannot read property 'length' of undefined at Object.exports.resolveLoaders (D:\workSpace\pms-pc\node_modules\happypack\lib\WebpackUtils.js:129:28) at resolveLoaders (D:\workSpace\pms-pc\node_modules\happypack\lib\HappyPlugin.js:169:20) at D:\workSpace\pms-pc\node_modules\happypack\node_modules\async\lib\async.js:713:13 at Immediate.iterate (D:\workSpace\pms-pc\node_modules\happypack\node_modules\async\lib\async.js:262:13) at processImmediate (internal/timers.js:439:21)

安装npm install happypack@5.0.0 指定5.0.0版本

5. TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function

webpack4与html-webpack-plugin插件不兼容，安装下一个版本npm install html-webpack-plugin@next -D

6. Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

安装下个版本css代码抽离插件 npm install extract-text-webpack-plugin@next -D

7. TypeError: Cannot read property 'eslint' of undefined

npm install eslint-loader@2.0.0 -D

8. Error: Path variable [contenthash] not implemented in this context: static/css/[name].[contenthash].css

安装插件 npm install mini-css-extract-plugin@latest -D，在配置文件webpack.prod.config.js中更改

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const extractCSSModule = new MiniCssExtractPlugin({
    filename: utils.assetsPath('css/[name].[contenthash].css'),
    disable: false,
    allChunks: true,
    ignoreOrder: true,
});

9. TypeError: extractCSSModule.extract is not a function

配置文件webpack.prod.config.js中更改、

           {
                test: /\.less/,
                include: config.useCSSModulePath,
                // loader: extractCSSModule.extract({
                //     fallback: 'style-loader',
                //     use: [
                //         {
                //             // https://github.com/webpack-contrib/css-loader
                //             loader: 'css-loader',
                //             options: {
                //                 module: true,
                //                 camelCase: true,
                //                 localIdentName: '[hash:base64:5]',
                //             },
                //         },
                //         'postcss-loader',
                //         {
                //             loader: 'less-loader',
                //             options: {
                //                 sourceMap: false,
                //                 includePaths: [sourcePath],
                //             },
                //         },
                //     ],
                // }),
                use: [
                    MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader'
                ]
            },

注：其实还有很多问题，忘记整理只能先记这么多，希望自己以后可以多整理吧