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


Posted in Javascript onApril 28, 2019

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

原先的环境

  • 项目原先通过Vue-cli 2.9.3 版本构建,原先使用的webpack 3.x版本
  • 首先需要对基础包进行更新(package.json)
  • webpack 更新到4.x版本,泡面这里更新到了4.28.3
  • 更新webpack-dev-server,泡面更新到了3.1.14版本,
  • 安装webpack-cli,泡面安装的是3.2.1版本

除了上面的这几个,还需要更新下面几个:

  • vue-loader 泡面直接升级到了15版本,
  • eslint-loader 升级到了1.7.1,这个当时在做启动的时候提示了一些错误,所以索性也就升级了.
  • happypack, 泡面使用了多线程加速,所以这个也必须要升级,否则会报错,泡面更新到了5.0.1
  • html-webpack-plugin, 这个也需要更新,否则会提示错误,泡面这里升级到了3.2.0

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

  • mini-css-extract-plugin, 该包是要替换掉extract-text-webpack-plugin来使用,所以后者就遗弃掉了.

接着我们修改一下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
  //  }]
  // })
 ]
}

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

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

接着,我们需要引入mini-css-extract-plugin插件,并添加到插件里:

...
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不完全指南,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的

Javascript 相关文章推荐
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
Oct 20 Javascript
angular中使用路由和$location切换视图
Jan 23 Javascript
win7下安装配置node.js+express开发环境
Dec 06 Javascript
jQuery实现下拉框功能实例代码
May 06 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
jQuery实现级联下拉框实战(5)
Feb 08 Javascript
JavaScript通过filereader接口读取文件
May 10 Javascript
vue监听scroll的坑的解决方法
Sep 07 Javascript
微信小程序自定义单项选择器样式
Jul 25 Javascript
通过layer实现可输入的模态框的例子
Sep 27 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 #jQuery
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 #Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 #Javascript
详解vue更改头像功能实现
Apr 28 #Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
Apr 28 #Javascript
js+html5 canvas实现ps钢笔抠图
Apr 28 #Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 #Javascript
You might like
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
Windows2003下php5.4安装配置教程(Apache2.4)
2016/06/30 PHP
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
Laravel框架实现抢红包功能示例
2019/10/31 PHP
实现复选框全选/全不选切换
2006/12/23 Javascript
javascript 中对象的继承〔转贴〕
2007/01/22 Javascript
IE浏览器打印的页眉页脚设置解决方法
2009/12/08 Javascript
javascript 构建一个xmlhttp对象池合理创建和使用xmlhttp对象
2010/01/15 Javascript
javascript小数计算出现近似值的解决办法
2010/02/06 Javascript
javascript的数组和常用函数详解
2014/05/09 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
分享vue.js devtools遇到一系列问题
2017/10/24 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
node.js调用C++函数的方法示例
2018/09/21 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
2019/09/01 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
Vue开发环境跨域访问问题
2020/01/22 Javascript
[04:45]上海特级锦标赛主赛事第三日TOP10
2016/03/05 DOTA
[39:46]完美世界DOTA2联赛PWL S2 LBZS vs Rebirth 第二场 11.25
2020/11/25 DOTA
python笔记(2)
2012/10/24 Python
Python的print用法示例
2014/02/11 Python
Python Logging 日志记录入门学习
2018/06/02 Python
django反向解析和正向解析的方式
2018/06/05 Python
django DRF图片路径问题的解决方法
2018/09/10 Python
Python运行不显示DOS窗口的解决方法
2018/10/22 Python
深入解析神经网络从原理到实现
2019/07/26 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
Python OpenCV实现测量图片物体宽度
2020/05/27 Python
Python的collections模块真的很好用
2021/03/01 Python
服务质量承诺书
2014/03/27 职场文书
生产操作工岗位职责
2014/09/16 职场文书
2014年党员个人剖析材料
2014/10/08 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电