vue项目升级webpack4指南

所用vue-cli版本为2.9.3, 非最新的3.0+版本, 包管理工具为yarn

现在vue cli 3.x版本已经稳定, 推荐使用 @vue/cli 3.x版本

初始化项目

vue init webpack my-project
cd my-project
yarn install

脚手架项目webpack版本为3.6.0

升级webpack等devdependencies

yarn upgrade webpack@4.6.0
yarn add webpack-dev-server webpack-cli -D

光升级这写是不够的, 此时运行项目会报一些奇奇怪怪的错误, 比如
TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function
查看错误信息上下文,

/workspace/my-project/node_modules/html-webpack-plugin/lib/compiler.js:81
        var outputName = compilation.mainTemplate.applyPluginsWaterfall('asset-path', outputOptions.filename, {
TypeError: compilation.mainTemplate.applyPluginsWaterfall is not a function

应该是相关插件版本不对, 比如这个错误就是html-webpack-plugin未升级版本导致

继续升级相关plugin

需要升级的相关plugin如下:

html-webpakc-plugin
vue-loader

其他未涉及的, 也尽可能升级到新的版本.

修改webpack等相关配置文件

指定webpack.dev.conf.j和webpack.prod.conf.js 的mode 为development和production, 否则会有警告信息⚠️
The 'mode' option has not been set, webpack will fallback to 'production' for this value.

此时项目已经能在dev-server下顺利运行.
删除多余配置项: webpack.DefinePlugin已不再需要, 在开发模式下, process.env.NODE_ENV 自动被设置为'development', 生成模式下则是production
其他环境变量推荐使用cross-env在命令里设置, 如果需要也可以保留.

cross-env cross-env NODE_ENV=test yarn test

其他插件修改:
NoEmitOnErrorsPlugin 废弃，使用optimization.noEmitOnErrors替代，在生产环境中默认开启
ModuleConcatenationPlugin 废弃，使用optimization.concatenateModules替代，在生产环境默认开启该插件。
NamedModulesPlugin 废弃，使用optimization.namedModules替代，在生产环境默认开启。
uglifyjs-webpack-plugin升级到了v1.0版本, 默认开启缓存和并行功能。
CommonsChunkPlugin 被删除

在配置文件中删除废弃的插件, 至此, 开发模式改造完毕

生产模式改造

应为CommonsChunkPlugin被删除, 改为内置的api, 首先删除webpack.prod.conf.js相关配置(CommonsChunkPlugin和UglifyJsPlugin), 新增项optimization,

 optimization: {
    runtimeChunk: {
      name: 'manifest'
    },
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: config.build.productionSourceMap,
        uglifyOptions: {
          warnings: false
        }
      }),
      new OptimizeCSSPlugin({
      cssProcessorOptions: config.build.productionSourceMap
        ? { safe: true, map: { inline: false } }
        : { safe: true }
    }),
    ],
    splitChunks:{
      chunks: 'async',
      minSize: 30000,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      name: false,
      cacheGroups: {
        vendor: {
          name: 'vendor',
          chunks: 'initial',
          priority: -10,
          reuseExistingChunk: false,
          test: /node_modules\/(.*)\.js/
        },
        styles: {
          name: 'styles',
          test: /\.(scss|css)$/,
          chunks: 'all',
          minChunks: 1,
          reuseExistingChunk: true,
          enforce: true
        }
      }
    }
  }

extract-text-webpack-plugin已不再被推荐使用, webpack4 推荐使用新的插件mini-css-extract-plugin

yarn add mini-css-extract-plugin  -D

修改配置文件

// const ExtractTextPlugin = require('extract-text-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

...
plugins: [
    ...
    // new ExtractTextPlugin({
    //   filename: utils.assetsPath('css/[name].[contenthash].css'),
    //   allChunks: true,
    // }),
    new MiniCssExtractPlugin({
      filename: 'css/app.[name].css',
      chunkFilename: 'css/app.[contenthash:12].css'  // use contenthash *
    }),
]

再修改build/utils文件中extract css的设置

// const ExtractTextPlugin = require('extract-text-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
    if (options.extract) {
      // return ExtractTextPlugin.extract({
      //   use: loaders,
      //   fallback: 'vue-style-loader'
      // })
      // MiniCssExtractPlugin.loader,
      return [MiniCssExtractPlugin.loader].concat(loaders)
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

yarn build已经能够正常打包, 经过测试, 打包5万行代码的一个项目, webpack4比3快20s左右

经过修改的demo项目github地址
补充: 如果打包的时候出现

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.

在webpack中增加配置即可

performance: {
  hints: false
}

tips

新版的webpack devserver 如果不指定host, 只能通过localhost访问, 通过ip不能访问, 修改方法很简单, 指明host为 '0.0.0.0'就可以

...
 host: '0.0.0.0', // can be overwritten by process.env.HOST
 port: 8080
...

问题

如果build或者dev时候出现, html-webpack-plugin报错的情况, 请升级该插件, 相关issue

yarn add html-webpack-plugin@next -D

如果报chunksSortMode相关的错误, 请删除chunksSortMode: 'dependency'之后再尝试build

还是建议升级html-webpack-plugin@next