Webpack3 迁移到 Webpack4

为什么要迁移

其实我是不知道的，只是实习的公司的项目要迁移，所以采取了解这方面的东西，公司的原因是由于公司项目越来越大，需要的依赖越来越多，导致开发的时候重新构建的时候速度十分缓慢，开发效率很低。

升级 webpack4

直奔主题，直接开始升级

首先升级 webpack4 到 4.8.1 （当然其他 4 的版本都是可以的），顺便安装一下 webpack-cli

1	npm install webpack@4.8.1 webpack-cli -D

然后我们 npm run dev 一下。『报错啦！』

这个是因为 webpack 和 webpack-dev-server 版本不兼容，升级一下就好了

1	npm install webpack-dev-server@3.1.4 -D

再次启动，又报错了。。。

这里是因为 html-webpack-plugin 版本不兼容导致的，网上给出的解决方案大部分是说执行 yarm add webpack-contrib/html-webpack-plugin -D

但是现在作者已经更新版本了，直接升级版本就可以了，不需要再去安装 webpack 官方的替代版本

1	npm install html-webpack-plugin@3.2.0 -D

再次启动，再次报错

升级一下 eslint 和 eslint-loader 吧

1	npm install eslint eslint-loader@2.0.0 -D

继续报错

升级 vue-loader 吧

1	npm install vue-loader@15.0.10 -D

错的更彻底了

这是因为新版的 vue-loader 需要加入一个新的配置 VueLoaderPlugin。所以要在下面这些文件修改一下配置。

// webpack.dev.conf.js 文件
// 引入 VueLoaderPlugin
const { VueLoaderPlugin } = require('vue-loader')
// 在下面的插件中添加 VueLoaderPlugin 
 plugins: [ 
    ... 
    new VueLoaderPlugin(), 
    ... 
 ]
 
// webpack.prod.conf.js 文件
// 这个和上面的文件一样处理了
// 引入 VueLoaderPlugin
const { VueLoaderPlugin } = require('vue-loader')
// 在下面的插件中添加 VueLoaderPlugin 
 plugins: [ 
    ... 
    new VueLoaderPlugin(), 
    ... 
 ]

再来，再来

这个是 webpack4 需要指定一下打包的模式（mode），指定一下就好，直接该配置就行了。『不要慌，小问题』

// webpack.dev.conf.js文件
const devWebpackConfig = merge(baseWebpackConfig, {
  mode: 'development',
  module: {...}
},

//同理在 webpack.prod.conf.js 文件
const devWebpackConfig = merge(baseWebpackConfig, {
  mode: 'production',
  module: {...}
},

疲惫的手再次按起了 npm run dev

震惊！居然没错了，居然可以运行了。好的，webpack4 升级结束，撒花！！

然而当我默默敲起了 npm run build

该错的终究还是要错的啊。。

这部分的错误是因为 webpack.optimize.CommonsChunkPlugin 已经被弃用，需要使用新的配置 config.optimization.splitChunks，在下面的文件再改一下配置

// webpack.prod.conf.js 文件
// 在 plugins 同级下添加下面代码
optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all'
        },
        manifest: {
          name: 'manifest',
          minChunks: Infinity
        },
      }
    },
  },
  // 嗯，就在上面加这一段代码
  plugins:[...]
 
// 分割线
// 再去掉该文件中 plugins 中的这部分代码
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks(module) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../node_modules')
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
    }),
    // This instance extracts shared chunks from code splitted chunks and bundles them
    // in a separate chunk, similar to the vendor chunk
    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
    new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3
    }),
    ...
// 不要客气，全删了，怕错就先注释掉呗。

让我们再次打包

『这个是大问题，要慌！』这个是因为官方已经不推荐使用 extract-text-webpack-plugin 提取 css 样式，可以使用 mini-css-extract-plugin 替代
如果不想改变的话可以升级 extract-text-webpack-plugin

1	"extract-text-webpack-plugin": "^4.0.0-beta.0",

但是，我们还是要用推荐的 mini-css-extract-plugin

首先安装一下插件

1	npm install mini-css-extract-plugin -D

记得去掉 package.json 中的包 “extract-text-webpack-plugin”: “^4.0.0-beta.0”

然后我们又来改配置了

//build 里面的util.js 文件
// 1 去掉 extract-text-webpack-plugin
const ExtractTextPlugin = require('extract-text-webpack-plugin') // 走好了您咧
// 2 引入新大佬
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 3 修改下面的 generateLoaders 函数
// 删掉原来的即我注释的代码，修改成下面这个样子
function generateLoaders (loader, loaderOptions) {
    ...
    if (options.extract) {
      // return ExtractTextPlugin.extract({
      //   use: loaders,
      //   fallback: 'vue-style-loader'
      // })
      return [MiniCssExtractPlugin.loader].concat(loaders)
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
}


// webpack.prod.conf.js文件
// 1 去掉 extract-text-webpack-plugin
// 删这个
const ExtractTextPlugin = require('extract-text-webpack-plugin') 
// 加下面的
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

// 2 去掉 plugins 里的配置 
new ExtractTextPlugin({ 
    filename: utils.assetsPath('css/[name].[contenthash].css'),
    allChunks: true, 
}),
// 3 在 plugins 加入新的插件配置
    new MiniCssExtractPlugin({
      filename: utils.assetsPath('css/[name].[contenthash:12].css'),
      allChunks: true,
    }),

最后再打包。。。

欢乐女神，圣洁美丽，webpack4 升级完成咧，如有其他问题，留言加百度，我们一起研究研究。