Vue项目从webpack3.x升级webpack4不完全指南

前段时间，泡面将自己的一个Vue-cli构建的前端框架从webpack3.x升级到了4.x版本，现在才拉出来记录一下，已备忘之用，也和大家分享一下，以免大家采坑。

原先的环境

除了上面的这几个，还需要更新下面几个：

除了上面几个,还需要额外下载一个:

接着我们修改一下webpack.base.conf.js,没有使用happypack的这步骤可略过...

泡面这里不知道为什么不能使用happypack来挂载vue-loader,否则会提示错误,所以泡面这里将原先的happypack的配置修改回了原先:

...const vueLoaderConfig = require('./vue-loader.conf')...module.exports = { ...  {   test: //.vue$/,    // loader: 'happypack/loader?id=happy-vue'    loader: 'vue-loader',    options: vueLoaderConfig  }, ... }

接着来调整 webpack.dev.conf.js

首先在合并配置的地方引入mode

 ... // 开发环境引入 mode: 'development', ... module: {  ... } devServer: {  ... }

webpack4需要手动引入vue-loader插件,因为泡面是从14版本升级到15版本,点我查看官方文档,如何从 v14 迁移,所以这里需要引入:

...const VueLoaderPlugin = require('vue-loader/lib/plugin')...module.export = { ... plugins: [  ...  // 引入vue-loader插件  new VueLoaderPlugin(),  ...  // 同时,泡面注释掉了vue-loader的happypack  // new Happypack({  //  id: 'happy-vue',  //  loaders: [{  //   loader: 'vue-loader',  //   options: vueLoaderConfig  //  }]  // }) ]}

接着, 以下插件被废弃掉了,直接注释掉

ok, 这个文件就改完了.

接着来修改webpack.prod.conf.js

同开发环境,需要引入mode和vue-loader,一模一样,所以这里不赘述了.

接着,我们需要在配置表里添加optimization选项:

...output: { ...},// 这里添加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    }   }  } }, plugins: [...]