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 相关文章推荐
HTML node相关的一些资料整理
Jan 01 Javascript
用js设置下拉框为只读的小技巧
Apr 10 Javascript
JS计算网页停留时间代码
Apr 28 Javascript
javascript作用域链与执行环境详解
Mar 25 Javascript
老生常谈js中的MVC
Jul 25 Javascript
Vue.js实现的表格增加删除demo示例
May 22 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
vue.js 实现点击展开收起动画效果
Jul 07 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
Apr 19 Javascript
JavaScript事件冒泡机制原理实例解析
Jan 14 Javascript
vue实现移动端项目多行文本溢出省略
Jul 29 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
BBS(php & mysql)完整版(七)
2006/10/09 PHP
社区(php&&mysql)三
2006/10/09 PHP
一周学会PHP(视频)Http下载
2006/12/12 PHP
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
2011/09/05 Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
2014/11/16 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
网页中右键功能的实现方法之contextMenu的使用
2017/02/20 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
微信小程序之选项卡的实现方法
2017/09/29 Javascript
vue props传值失败 输出undefined的解决方法
2018/09/11 Javascript
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
浅谈v-for 和 v-if 并用时筛选条件方法
2019/11/07 Javascript
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
python进阶教程之模块(module)介绍
2014/08/30 Python
Python实现简单登录验证
2016/04/13 Python
python2与python3共存问题的解决方法
2018/09/18 Python
通过PHP与Python代码对比的语法差异详解
2019/07/10 Python
详细分析Python垃圾回收机制
2020/07/01 Python
解决python3输入的坑——input()
2020/12/05 Python
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
学生个人自我鉴定范文
2014/03/28 职场文书
党员对照检查材料思想汇报(党的群众路线)
2014/09/24 职场文书
应聘教师求职信范文
2015/03/20 职场文书
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android