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

...
const vueLoaderConfig = require('./vue-loader.conf')
...
module.exports = {
 ...
  {
   test: /\.vue$/,
    // loader: 'happypack/loader"htmlcode">

 ...
 // 开发环境引入
 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
  //  }]
  // })
 ]
}


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

  
webpack.DefinePlugin
  
webpack.NamedModulesPlugin
  
webpack.NoEmitOnErrorsPlugin

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
    "htmlcode">

...
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
plugins: [
 ...
 new MiniCssExtractPlugin({
  filename: utils.assetsPath('css/[name].[contenthash].css')
 }),
 ... 
]


然后, 我们需要把废弃掉的插件注释掉:


webpack.DefinePlugin
UglifyJsPlugin (放到optimization里了)
ExtractTextPlugin
OptimizeCSSPlugin (放到optimization里了)
CommonsChunkPlugin (所有的...)


ok, 至此该文件就调整完了.
最后一个utils.js
这里主要是需要添加mini-css-extract-plugin插件




...
// 注释掉原来的插件
// const ExtractTextPlugin = require("extract-text-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
...
// 找到:
// return ExtractTextPlugin.extract({
//  use: loaders,
//  fallback: "vue-style-loader",
//  publicPath: '../../'
// });
// 改为:
return [MiniCssExtractPlugin.loader].concat(loaders)


ok, 大功告成! 至此webpack4的配置文件就全部修改完成了.
目前, 泡面至在此记录流水账,回头性能测试再发文章记录.
ps: 如果出现这种错误



error: [vue-loader] vue-template-compiler must be installed as a peer dependency, or a compatible compiler implementation must be passed via options.

请重新安装一下 vue-template-compiler
总结
以上所述是小编给大家介绍的Vue项目从webpack3.x升级webpack4不完全指南，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的