vue / vue-cli升级webpack4

vue升级webpack4.x

---

升级包

首先升级开发依赖中webpack构建流程中用到的loader和plugin以及它们的相关依赖升级到最新版本

yarn upgrade -L

安装包

webpack4.x 需要依赖webpack-cli

yarn add webpack-cli --dev

需要特别注意的依赖包extract-text-webpack-plugin

因为extract-text-webpack-plugin的最新正式版还没有对webpack4.x进行支持，所以有两个选择，第一个是：yarn upgrade extract-text-webpack-plugin@next升级到测试版，第二个是换成mini-css-extract-plugin，作者在这采用的第一种方案。

修改配置文件

webpack4内置了optimization.splitChunks、optimization.runtimeChunk代替CommonsChunkPlugin,
内置了optimization.noEmitOnErrors代替NoEmitOnErrorsPlugin；
内置了optimization.namedModules代替NamedModulesPlugin；
下面针对配置文件进行修改

修改开发环境webpack.dev.conf.js

增加设置mode为development，删除DefinePluginplugin中的环境变量设置，如果只用来设置环境变量，可以删除插件；
注释webpack.NamedModulesPlugin、webpack.NoEmitOnErrorsPlugin

const devWebpackConfig = merge(baseWebpackConfig, {
  mode: 'development',
  // ....
  plugins: {
      // new webpack.NamedModulesPlugin(), 
      // new webpack.NoEmitOnErrorsPlugin(),
  }

修改生产环境webpack.prod.conf.js

增加设置mode为production，optimization配置；删除DefinePluginplugin中的环境变量设置，如果只用来设置环境变量，可以删除插件；
注释webpack.optimize.CommonsChunkPlugin、uglifyjs-webpack-plugin、webpack.optimize.ModuleConcatenationPlugin；
如果npm run build时报错Error: Path variable [contenthash] not implemented in this context: static/css/[name].[contenthash].css，将contenthash换成hash即可

const webpackConfig = merge(baseWebpackConfig, {
  mode: 'production',
  // ....
 optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          // test: path.resolve(__dirname, "node_modules"),
          chunks: 'initial',
          name: 'vendor'
        },
        'async-vendor': {
          test: /[\\/]node_modules[\\/]/,
          // test: path.resolve(__dirname, "node_modules"),
          chunks: 'async',
          name: 'async-vendor'
        }
      }
    },
    runtimeChunk: {
      name: 'manifest'
    }
  },
  // ....
  plugins: {
  // 如果`npm run build`时报错
  // `Error: Path variable [contenthash] not implemented in this context: static/css/[name].[contenthash].css`
  // 将`contenthash`换成`hash`，也可删除不用hash值`[name].css`
      new ExtractTextPlugin({
          filename: utils.assetsPath('css/[name].[hash].css'),
          allChunks: true,
      }),
  }
 }

修改webpack.base.conf.js

如果出现vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config.，需要修改文件，具体请看错误记录

以上是对此次升级的总结，下面试升级过程中遇到的错误记录

错误记录

• webpack与webpack-dev-server版本不兼容

module.js:549
    throw err;
    ^
Error: Cannot find module 'webpack/bin/config-yargs'

升级webpack-dev-server版本

• 缺少webpack-cli

The CLI moved into a separate package: webpack-cli.
Please install 'webpack-cli' in addition to webpack itself to use the CLI.
-> When using npm: npm install webpack-cli -D
-> When using yarn: yarn add webpack-cli -D
module.js:549
    throw err;
    ^
Error: Cannot find module 'webpack-cli/bin/config-yargs'

安装webpack-cli

• npm run dev 报错

  10% building modules 1/1 modules 0 active(node:28356) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
(node:28356) DeprecationWarning: Tapable.apply is deprecated. Call apply on the plugin directly instea  10% bu           10% building modules 7/10 modules 3 active …es\webpack-dev-server\client\overlay.jsF:\project\\smart-video-mobile\node_modules\html-webpack-plugin\lib\compiler.js:81
        var outputName = compilation.mainTemplate.applyPluginsWaterfall('asset-path', outputOptions.filename, {

需要升级html-webpack-plugin

• 升级webpack之后与各种loader和依赖包可能存在版本不兼容问题，需要升级包的版本

Module build failed (from ./node_modules/eslint-loader/index.js):
TypeError: Cannot read property 'eslint' of undefined

eslint-loader不兼容

• vue-loader引发的问题

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.

需要增加这两处。

• No PostCSS Config found in
  没有postCSS配置文件，在项目根目录下添加.postcssrc.js文件

module.exports = {
    plugins: {
        autoprefixer: {}
    }
}

• 更换CommonsChunkPlugin
  在webpack4中移除了CommonsChunkPlugin，使用SplitChunksPlugin

• Warning：mode config

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.
You can also set it to 'none' to disable any default behavior. Learn more:

需要配置mode，dev.conf中为development，prod.conf中为production

const webpackConfig = merge(baseWebpackConfig, {
  mode: 'production',
  module: {
    rules: utils.styleLoaders({
    ........

const devWebpackConfig = merge(baseWebpackConfig, {
  mode: 'development',
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  ..........

• 基本可以运行 了，如果后续发现问题会更新，也欢迎提出问题
• 如果问题请指正，谢谢