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 相关文章推荐
JS无限树状列表实现代码
Jan 11 Javascript
javascript中字符串拼接详解
Sep 26 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
dedecms页面如何获取会员状态的实例代码
Mar 15 Javascript
几种经典排序算法的JS实现方法
Mar 25 Javascript
Angularjs实现上传图片预览功能
Sep 01 Javascript
tangram.js库实现js类的方式实例分析
Jan 06 Javascript
有趣的JavaScript隐式类型转换操作实例分析
May 02 Javascript
vue-cli3项目配置eslint代码规范的完整步骤
Sep 10 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
javascript中闭包closure的深入讲解
Mar 03 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实现当前页面点击下载文件的简单方法
2016/09/22 PHP
Yii2单元测试用法示例
2016/11/12 PHP
PHP利用Socket获取网站的SSL证书与公钥
2017/06/18 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
laravel通过创建自定义artisan make命令来新建类文件详解
2017/08/17 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
2006/12/22 Javascript
语义化 H1 标签
2008/01/14 Javascript
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
javascript匿名函数实例分析
2014/11/18 Javascript
js实现商品抛物线加入购物车特效
2020/11/18 Javascript
使用jQuery,Angular实现登录界面验证码详解
2017/04/27 jQuery
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
JavaScript对象_动力节点Java学院整理
2017/06/23 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
angular学习之动态创建表单的方法
2018/12/07 Javascript
vue实现短信验证码登录功能(流程详解)
2019/12/10 Javascript
python用装饰器自动注册Tornado路由详解
2017/02/14 Python
深入了解Python中pop和remove的使用方法
2018/01/09 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
详解使用python3.7配置开发钉钉群自定义机器人(2020年新版攻略)
2020/04/01 Python
给ubuntu18安装python3.7的详细教程
2020/06/08 Python
Django返回HTML文件的实现方法
2020/09/17 Python
中国最大的团购网站:聚划算
2016/09/21 全球购物
BASIC HOUSE官方旗舰店:韩国著名的服装品牌
2018/09/27 全球购物
英国健康和美容技术产品购物网站:CurrentBody
2019/07/17 全球购物
12月小学生校园广播稿
2014/02/04 职场文书
军训考核自我鉴定
2014/02/13 职场文书
预备党员表决心书
2014/03/11 职场文书
团党委领导干部党的群众路线教育实践活动个人对照检查材料思想汇
2014/10/05 职场文书
2014年班主任工作总结
2014/11/08 职场文书
初中班级口号霸气押韵
2015/12/24 职场文书
2019年描写人生经典诗句大全
2019/07/08 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP