[JavaScript知识库]webpack3升级为webpack4的实践

刚来到公司，接手了一个webpack3的老项目，打包需要100多秒，热更新日常不生效，需要刷新后等待15秒左右，所以我对它进行了升级，记录一下这次的升级过程和遇到的坑。

先说一下效果，这次webpack升级提升了不少打包速度：生产打包提升了30%；开发打包提升40%，开发热更新提升70%。

• 升级到 webpack 4
• 移除 CommonsChunkPlugin，默认使用 SplitChunksPlugin 分割代码
• 升级 html-webpack-plugin
• 引入 mini-css-extract-plugin 并配置 css-loader
• 配置 mode 属性
• 升级 vue-loader 到 v14.2.2
• 修复大小限制的报错
• webpack3与webpack4开发依赖对比
• 文件可以更小一些吗？构建速度可以更快一些吗？

升级 webpack 到 4

"webpack": "^3.6.0" -> "webpack": "^4.43.0"

yarn add -D webpack@4.43.0

移除 CommonsChunkPlugin?

          // chunks.push(
            //     new webpack.optimize.CommonsChunkPlugin({
            //         names: ['app'],
            //         children: true,
            //         async: chunkFileName,
            //         minChunks(module, count) {
            //             return (
            //                 count > 1 &&
            //                 module.resource &&
            //                 module.resource.includes(`${chunkPrefix}/${chunkName}`)
            //             );
            //         }
            //     })
            // );

升级 html-webpack-plugin

"html-webpack-plugin": "^2.30.1" -> "html-webpack-plugin": "^4.3.0"

yarn add -D html-webpack-plugin@latest

配置 mode 属性

开发环境配置为development，其他环境为production

mode: "production";

升级 vue-loader

"vue-loader": "^13.3.0" -> "vue-loader": "14.2.2"

yarn add -D vue-loader@latest

修复大小限制的报错

// webpack.config.js
module.exports = {
  performance: {
    hints: false,
    maxEntrypointSize: 5000 * 1024,
    maxAssetSize: 5000 * 1024,
  },
};

webpack3与webpack4开发依赖对比

// webpack3
    "eslint-loader": "^1.9.0",
    "html-webpack-plugin": "^2.29.0",
    "vue-loader": "^12.1.0",
    "webpack": "^3.4.1",
// webpack4
    "eslint-loader": "4.0.2",
    "html-webpack-plugin": "4.3.0",
    "vue-loader": "14.2.2",
    "webpack": "4.43.0",

?现在仍然有一个警告

No parser and no filepath given, using 'babel' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred

但是从信息无法确定报错的原因，网上的方式尝试之后也没有生效，还需继续优化。

文件可以更小一些吗？构建速度可以更快一些吗

现在构建时间仍然需要80秒左右，后续会尝试继续优化。