升级webpack4问题总结

1.Error: Cannot find module 'webpack/bin/config-yargs'报错

升级webpack4对应的插件如webpack-cli, webpack-dev-server也要升级到对应的版本，要不然就会报下面的错误

internal/modules/cjs/loader.js:834
  throw err;
  ^

Error: Cannot find module 'webpack/bin/config-yargs'
Require stack:
- E:\workplace\h5\crm\dev\node_modules\webpack-dev-server\bin\webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:831:15)
    at Function.Module._load (internal/modules/cjs/loader.js:687:27)
    at Module.require (internal/modules/cjs/loader.js:903:19)

最终我的版本

"webpack": "^4.32.2",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.5.1"

2.(node:6452) UnhandledPromiseRejectionWarning: Error: Callback was already called.报错

升级webpack4替换抽离css组件extract-text-webpack-plugin为mini-css-extract-plugin同时注意版本否则还是会报错配置为

new ExtractTextPlugin({
      filename: 'static/css/[name].[contenthash].css'),
      allChunks: false
})
替换为
new MiniCssExtractPlugin({
      filename: 'static/css/[name].[chunkhash:8].css',
      chunkFilename: 'static/css/[id].[chunkhash:8].css'
})

版本为

"mini-css-extract-plugin": "^0.8.2"

同时在loader进行配置

const devMode = process.env.NODE_ENV !== 'production'
module: {
        rules: [ 
            {
                test: /\.(scss|sass|less|stylus|css)$/i,
                use: [devMode ? 'style-loader' : MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
            }
        ]
    },

3.vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.报错

Module Error (from ./node_modules/vue-loader/lib/index.js):
vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.
Module parse failed: Unexpected character '@' (31:0)
You may need an appropriate loader to handle this file type.
|
|
> @import url('./static/css/base.css');
| #app{
|     .img{

webpack4需要VueLoaderPlugin这个插件引入即可

const VueLoaderPlugin = require('vue-loader/lib/plugin')
plugins: [
     new VueLoaderPlugin()
]

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

throw new RemovedPluginError(errorMessage);
                        ^

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

替换UglifyJsPlugin为TerserPlugin

plugins: [
new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false
            },
            sourceMap: config.build.productionSourceMap,
            parallel: true,
            output: {
                comments: false,
                beautify: false,
                max_line_len: 100
            }
        })
]
替换为
optimization: {
        minimizer: [
            new TerserPlugin({
                parallel: true,
                terserOptions: {
                    compress: {
                        warnings: false,
                        drop_debugger: true,
                        drop_console: true
                    }
                }
            })
        ]
}

同时uglify不支持es6，所以terser作为js代码压缩工具

5.process.env.NODE_ENV即使写了mode也为undefined

有时候我们用node调用执行文件process.env.NODE_ENV，webpack还没有执行process.env.NODE_ENV就会找不到，这个时候我们可以在执行命令处加cross-env NODE_ENV=production开发环境为development

"build": "cross-env NODE_ENV=production node build/build.js"

之所以用cross-env是为了更好的跨端，否则windows会报错，这样process.env.NODE_ENV就会赋值，解决区分环境的问题，同时可以去掉webpack3的

new webpack.DefinePlugin({
    'process.env': env
})

6.CommonChunkPlugin替换为splitChunks

7.去除ModuleConcatenationPlugin作用域提升插件

在 webpack4 中，只需要设置 mode 为 production即可
optimization配置

 moduleIds: hashed，
 namedChunks: true,

可以替代HashedModuleIdsPlugin和NamedChunksPlugin
引申

moduleIds
项目工程中加载的 module，webpack 会为其分配一个 moduleId，映射对应的模块。这样产生的问题是一旦工程中模块有增删或者顺序变化，moduleId 就会发生变化，进而可能影响所有 chunk 的 content hash 值。只是因为 moduleId 变化就导致缓存失效，这肯定不是我们想要的结果。
在 webpack4 以前，通过 HashedModuleIdsPlugin 插件，我们可以将模块的路径映射成 hash 值，来替代 moduleId，因为模块路径是基本不变的，故而 hash 值也基本不变。
但在 webpack4 中，只需要optimization的配置项中设置 moduleIds 为 hashed 即可。
namedChunks
除了 moduleId，我们知道分离出的 chunk 也有其 chunkId。同样的，chunkId 也有因其 chunkId 发生变化而导致缓存失效的问题。由于manifest与打出的 chunk 包中有chunkId相关数据，所以一旦如“增删页面”这样的操作导致 chunkId 发生变化，可能会影响很多的 chunk 缓存失效。
在 webpack4 以前，通过增加NamedChunksPlugin，使用 chunkName 来替换 chunkId，实现固化 chunkId，保持缓存的能力。在 webpack4 中，只需在optimization的配置项中设置 namedChunks 为 true 即可。

7.Error: undefined:2:1: missing '{' 报错

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: undefined:2:1: missing '{'

sass版本过高导致的报错，只需要把版本降到6.0.6即可解决