前段時(shí)間，泡面將自己的一個(gè)Vue-cli構(gòu)建的前端框架從webpack3.x升級(jí)到了4.x版本，現(xiàn)在才拉出來記錄一下，已備忘之用，也和大家分享一下，以免大家采坑。

原先的環(huán)境

除了上面的這幾個(gè)，還需要更新下面幾個(gè)：

除了上面幾個(gè),還需要額外下載一個(gè):

接著我們修改一下webpack.base.conf.js,沒有使用happypack的這步驟可略過...

泡面這里不知道為什么不能使用happypack來掛載vue-loader,否則會(huì)提示錯(cuò)誤,所以泡面這里將原先的happypack的配置修改回了原先:

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

接著來調(diào)整 webpack.dev.conf.js

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

 ... // 開發(fā)環(huán)境引入 mode: 'development', ... module: {  ... } devServer: {  ... }

webpack4需要手動(dòng)引入vue-loader插件,因?yàn)榕菝媸菑?4版本升級(jí)到15版本,點(diǎn)我查看官方文檔,如何從 v14 遷移,所以這里需要引入:

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

接著, 以下插件被廢棄掉了,直接注釋掉

ok, 這個(gè)文件就改完了.

接著來修改webpack.prod.conf.js

同開發(fā)環(huán)境,需要引入mode和vue-loader,一模一樣,所以這里不贅述了.

接著,我們需要在配置表里添加optimization選項(xiàng):

...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: [...]