Webpack3迁移4实践与问题总结

环境:

开发工具:vscode

命令行:gitbash(git附带的)

nodejs:10.15.1

npm:6.4.0

cnpm: 使用npm镜像安装, 提高国内安装速度. 如果不想用，下面的命令中cnpm换成npm即可。参考http://npm.taobao.org/

把webpack3换成4

# 切换到项目根目录
cd <project-root>
# 删除现有依赖
rm -rf node_modules
# 重新安装依赖
cnpm install
# 升级webpack到4
cnpm install --save-dev webpack@4.29.6

解决升级带来的问题

尝试打包

webpack --config webpack.dev.config.js

出现很多报错

• 报错1:

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

• 原因：

CommonsChunkPlugin 这个插件移除了。webpack4在optimization中提供了默认配置。

• 解决办法：
  配置文件中删除CommonsChunkPlugin相关的配置。

plugins: [
    new MomentLocalesPlugin(),
    new WebpackChunkHash(),
    new webpack.HashedModuleIdsPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: m => m.context && m.context.includes('node_modules')
    }),
    new webpack.optimize.CommonsChunkPlugin({
        name: 'runtime',
        minChunks: Infinity
    }),
]

• 警告1:

(node:22228) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead

• 原因:
  extract-text-webpack-plugin 3.x版本不支持webpack4，需要升级到4.0或者换用mini-css-extract-plugin。

这个插件的作用是把多个css文件打包成单一文件.

• 解决办法：

这只是一个警告, 不必处理.

• 报错2：

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

• 原因：

webpack4中新增了一个mode选项，提供了大量的默认配置，减少配置工作量。

• 解决

修改webpack.prod.config.js. 参考https://webpack.js.org/concepts/mode/

module.exports = {
    mode: 'production',
    performance: {
        hints: 'warning'
    },
    output: {
        pathinfo: false
    },
    optimization: {
        namedModules: false,
        namedChunks: false,
        nodeEnv: 'production',
        flagIncludedChunks: true,
        occurrenceOrder: true,
        sideEffects: true,
        usedExports: true,
        concatenateModules: true,
        splitChunks: {
            hidePathInfo: true,
            minSize: 30000,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
        },
        noEmitOnErrors: true,
        checkWasmTypes: true,
        minimize: true,
    },
    plugins: [
        new TerserPlugin( /* ... */ ),
        new webpack.DefinePlugin({
            "process.env. NODE_ENV": JSON.stringify("production")
        }),
        new webpack.optimize.ModuleConcatenationPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ]
}

修改webpack.dev.config.js

module.exports = {
    mode: 'development'
    devtool: 'eval',
    cache: true,
    performance: {
        hints: false
    },
    output: {
        pathinfo: true
    },
    optimization: {
        namedModules: true,
        namedChunks: true,
        nodeEnv: 'development',
        flagIncludedChunks: false,
        occurrenceOrder: false,
        sideEffects: false,
        usedExports: false,
        concatenateModules: false,
        splitChunks: {
            hidePathInfo: false,
            minSize: 10000,
            maxAsyncRequests: Infinity,
            maxInitialRequests: Infinity,
        },
        noEmitOnErrors: false,
        checkWasmTypes: false,
        minimize: false,
    },
    plugins: [
        new webpack.NamedModulesPlugin(),
        new webpack.NamedChunksPlugin(),
        new webpack.DefinePlugin({
            "process.env. NODE_ENV": JSON.stringify("development")
        }),
    ]
}

• 报错3：
  使用new webpack.optimize. UglifyJsPlugin()时报错

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

• 原因：

Uglify是压缩js的插件, 现在已经不需要了。

• 解决：

现在只要在webpack.prod.config.js中指定mode:'production'，这样webpack会自带config.optimization.minimize=true。
打包成生产环境包时就自动压缩了。

• 报错4：
  执行下面命令时报错

webpack-dev-server --config webpack.dev.config.js
Error: Cannot find module 'webpack/bin/config-yargs'

• 原因：
  可能是因为Webpack与webpack-dev-server版本不兼容导致。

"webpack": "^4.29.6",
"webpack-dev-server": "^2.11.3",

• 解决:
  安装最新版webpack-dev-server

cnpm i -D webpack-dev-server@3.2.1

再次启动, 解决!