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 相关文章推荐
JQuery上传插件Uploadify使用详解及错误处理
Apr 27 Javascript
Js实现动态添加删除Table行示例
Apr 14 Javascript
js实现数组转换成json
Jun 26 Javascript
JavaScript调用客户端Java程序的方法
Jul 27 Javascript
javascript创建cookie、读取cookie
Mar 31 Javascript
自己封装的一个原生JS拖动方法(推荐)
Nov 22 Javascript
分享vue.js devtools遇到一系列问题
Oct 24 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 Javascript
openlayers4实现点动态扩散
Aug 17 Javascript
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
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
ajax完美实现两个网页 分页功能的实例代码
2013/04/16 PHP
php中session退出登陆问题
2014/02/27 PHP
用正则xmlHttp实现的偷(转)
2007/01/22 Javascript
推荐一些非常不错的javascript学习资源站点
2007/08/29 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
SharePoint 客户端对象模型 (一) ECMA Script
2011/05/22 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
js调试系列 控制台命令行API使用方法
2014/06/18 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
jquery判断input值不为空的方法
2016/06/05 Javascript
Vue.js每天必学之表单控件绑定
2016/09/05 Javascript
JS button按钮实现submit按钮提交效果
2016/11/01 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
Vue实现回到顶部和底部动画效果
2019/07/31 Javascript
AngularJS动态生成select下拉框的方法实例
2019/11/17 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
[40:16]TFT vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
Python从使用线程到使用async/await的深入讲解
2018/09/16 Python
python实现socket+threading处理多连接的方法
2019/07/23 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
工作自我评价分享
2013/12/01 职场文书
保卫科工作岗位职责
2014/03/01 职场文书
爱心捐款倡议书
2014/04/14 职场文书
机电一体化应届生求职信
2014/08/09 职场文书
党员群众路线对照检查材料思想汇报
2014/09/17 职场文书
红色经典电影观后感
2015/06/18 职场文书