babel7.x和webpack4.x配置vue项目的方法步骤


Posted in Javascript onMay 12, 2019

很偶然的今天想开个自己的小项目,记录一下最近项目工程上实现的一个小交互。按照之前运行非常流畅的配置走一遍,打包遇到各种坑。只好根据命令行的报错逐个排查,发现babel升级了一个大版本,已经到7.x了。看来每日沉迷项目,已经跟不上节奏了。这里记录一下遇到的问题以及解决方案。

1.webpack 4.x 插件 extract-text-webpack-plugin

(node:2628) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
i 「wds」: Project is running at http://localhost:8300/
i 「wds」: webpack output is served from /
i 「wds」: Content not from webpack is served from F:\private\plugin-insert\dist
F:\private\plugin-insert\node_modules\webpack\lib\Chunk.js:838
        throw new Error(
        ^

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
  at Chunk.get (F:\private\plugin-insert\node_modules\webpack\lib\Chunk.js:838:9)
  at F:\private\plugin-insert\node_modules\extract-text-webpack-plugin\dist\index.js:176:48
  at Array.forEach (<anonymous>)
  at F:\private\plugin-insert\node_modules\extract-text-webpack-plugin\dist\index.js:171:18
  at AsyncSeriesHook.eval [as callAsync] (eval at create (F:\private\plugin-insert\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:7:1)
  at AsyncSeriesHook.lazyCompileHook (F:\private\plugin-insert\node_modules\tapable\lib\Hook.js:154:20)
  at Compilation.seal (F:\private\plugin-insert\node_modules\webpack\lib\Compilation.js:1231:27)
  at hooks.make.callAsync.err (F:\private\plugin-insert\node_modules\webpack\lib\Compiler.js:541:17)
  at _done (eval at create (F:\private\plugin-insert\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:9:1)
  at _err1 (eval at create (F:\private\plugin-insert\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:32:22)

extract-text-webpack-plugin 提取单独打包css文件时报错,官方安装部分的文档只写到了webpack 3,目前还没有webpack 4版本,可以使用 extract-text-webpack-plugin@next 解决,也可以使用 mini-css-extract-plugin 。

mini-css-extract-plugin 插件用法如下:

const MiniCssExtractPlugin = require("mini-css-extract-plugin") ;

const config = module.exports = {

 plugins: [
  
 new MiniCssExtractPlugin({
   
 filename: "[name].[chunkhash:8].css",
   
  chunkFilename: "[id].css"
  
  })

 ],

 
module: {
  
rules: [
   
 {
   
 test: /\.css$/,
   
 use: [
    
 
MiniCssExtractPlugin.loader,
    
 
 "css-loader"
    
 ]
  
 }
 
 ]
 
 }
}

module.exports = config

2.babel 升级 6.x 到 7.x

(1) @babel/core

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/core'
 babel-loader@8 requires Babel 7.x (the package '@babel/core'). 
 If you'd like to use Babel 6.x ('babel-core'), you should install 'babel-loader@7'.

没找到 @babel/core ,这里把 babel-core 卸载,并安装 @babel/core 。

npm un babel-core
npm i -D @babel/core

(2) @babel/preset-*

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only functions.

将 babel-preset-* 卸载,重新安装 @babel/preset-* ,并且修改 .babelrc 中的 presets

npm:
- babel-preset-env
+ @babel/perset-env

.babelrc:
- "presets": ["env"]
+ "presets": ["@babel/preset-env"]

另,stage-*已弃用

(3) @babel/plugin-*

Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: this.setDynamic is not a function
  at PluginPass.pre
  ...

这次是插件了,一样把babel-plugin-*卸载,重新安装@babel/plugin-*

然后修改.babelrc文件

具体的包名可以在 npm仓库 里找

(4) 最终文件

.babelrc
{
  "presets": ["@babel/preset-env"],
  "plugins": [
      "@babel/plugin-transform-runtime"
  ]
}

package.json
"devDependencies": {
  "@babel/core": "^7.1.2",
  "@babel/plugin-transform-runtime": "^7.1.0",
  "@babel/preset-env": "^7.1.0",
  "babel-loader": "^8.0.4",
  
  ...
 },
"dependencies": {
  "@babel/runtime": "^7.1.2",
  "vue": "^2.5.17",
  "vue-loader": "^15.4.2",
  "vue-router": "^3.0.1",
  "vuex": "^3.0.1",
  "webpack": "^4.22.0",
  "webpack-cli": "^3.1.2",
  "webpack-dev-server": "^3.1.10",
  "webpack-merge": "^4.1.4"
  ...
 }

(5) 总结

babel 舍弃了以前的 babel-*-* 的命名方式,改成了 @babel/*-*

修改依赖和 .babelrc 文件后就能正常启动项目了。

3.vue-loader 15.x vueLoaderPlugin

vue-loader was used without the corresponding plugin. 
Make sure to include VueLoaderPlugin in your webpack config.
//两个方式都可以的,随便用一个

const VueLoaderPlugin = require('vue-loader/lib/plugin');

// 或者 

const { VueLoaderPlugin } = require('vue-loader');


plugins: [
  // make sure to include the plugin for the magic
  new VueLoaderPlugin()
]

详细 https://github.com/vuejs/vue-loader/issues/1238

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript的public、private和privileged模式
Dec 28 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
Jan 24 Javascript
jquery实现弹出层遮罩效果的简单实例
Mar 03 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
javascript精确统计网站访问量实例代码
Dec 19 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
javascript计算渐变颜色的实例
Sep 22 Javascript
vue.js实例对象+组件树的详细介绍
Oct 20 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
VUE DEMO之模拟登录个人中心页面之间数据传值实例
Oct 31 Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 #Javascript
使vue实现jQuery调用的两种方法
May 12 #jQuery
React优化子组件render的使用
May 12 #Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
May 12 #Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 #Javascript
用js简单提供增删改查接口
May 12 #Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
May 12 #Javascript
You might like
PHP IF ELSE简化/三元一次式的使用
2011/08/22 PHP
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
Thinkphp整合阿里云OSS图片上传实例代码
2019/04/28 PHP
基于jquery的拖动布局插件
2011/11/25 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
JavaScript在for循环中绑定事件解决事件参数不同的情况
2014/01/20 Javascript
JavaScript中对象property的读取和写入方法介绍
2014/12/30 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
javascript常用的设计模式
2017/02/09 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
2017/03/04 Javascript
ES6新特性之解构、参数、模块和记号用法示例
2017/04/01 Javascript
JS设计模式之单例模式(一)
2017/09/29 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
Python中字符编码简介、方法及使用建议
2015/01/08 Python
python实现数独算法实例
2015/06/09 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
matplotlib在python上绘制3D散点图实例详解
2017/12/09 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
Python一个简单的通信程序(客户端 服务器)
2019/03/06 Python
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
金融管理毕业生求职信
2014/03/03 职场文书
中药学自荐信
2014/06/15 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
学雷锋感言
2015/08/03 职场文书
Python 中 Shutil 模块详情
2021/11/11 Python
Vite + React从零开始搭建一个开源组件库
2022/06/25 Javascript
Nginx配置使用详解
2022/07/07 Servers
JS前端轻量fabric.js系列物体基类
2022/08/05 Javascript