Webpack was upgraded from 2.5.1 to 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

NPM install cross-env

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

NPM install uglifyjs-webpack-plugin plugin annotation code UglifyJsPlugin, webpack.dev.conf.js configuration file:

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

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

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

Webpack4 comes with code segmentation, comment out CommonsChunkPlugin related code

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 [email protected] specifies version 5.0.0

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

Webpack4 is not compatible with the HTml-webpack-plugin, install the next version NPM install html-webpack-plugin@next -d

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

Install the next version of the CSS code extraction plug-in NPM install extract-text-webpack-plugin@next -d

7. TypeError: Cannot read property ‘eslint’ of undefined

NPM install [email protected] – D

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

Install the plugin NPM install mini-css-extract-plugin@latest -d, changed in the configuration file 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,
});
Copy the code

9. TypeError: extractCSSModule.extract is not a function

Changes in the configuration file 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'
                ]
            },

Copy the code

Note: in fact, there are many problems, forget to organize can only remember so much, I hope I can organize more in the future