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 相关文章推荐
jQuery中scrollTop()方法用法实例
Jan 16 Javascript
js实现按钮控制图片360度翻转特效的方法
Feb 17 Javascript
多种jQuery绑定事件的实现方式
Jun 13 Javascript
全面了解JS中的匿名函数
Jun 29 Javascript
javascript运算符——位运算符全面介绍
Jul 14 Javascript
vue-cli入门之项目结构分析
Apr 20 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
Vue-router结合transition实现app前进后退动画切换效果的实例
Oct 11 Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 jQuery
详解为生产环境编译Angular2应用的方法
Dec 10 Javascript
JavaScript 实现下雪特效的示例代码
Sep 09 Javascript
openlayers实现图标拖动获取坐标
Sep 25 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+javascript模拟Matrix画面
2006/10/09 PHP
PHP遍历目录函数opendir()、readdir()、closedir()、rewinddir()总结
2014/11/18 PHP
php常用的url处理函数总结
2014/11/19 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
微信公众号开发之通过接口删除菜单
2017/02/20 PHP
CodeIgniter框架钩子机制实现方法【hooks类】
2018/08/21 PHP
ThinkPHP5.1框架数据库链接和增删改查操作示例
2019/08/03 PHP
jquery 最简单的属性菜单
2009/10/08 Javascript
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
js自定义事件及事件交互原理概述(一)
2013/02/01 Javascript
js获取dom的高度和宽度(可见区域及部分等等)
2013/06/13 Javascript
简单谈谈JavaScript的同步与异步
2015/12/31 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
2016/01/14 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
在 Angular 中实现搜索关键字高亮示例
2017/03/21 Javascript
JS二叉树的简单实现方法示例
2017/04/05 Javascript
老生常谈JavaScript面向对象基础与this指向问题
2017/10/16 Javascript
JavaScript数组去重的方法总结【12种方法,号称史上最全】
2019/02/28 Javascript
微信小程序监听用户登录事件的实现方法
2019/11/11 Javascript
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
python实现定时压缩指定文件夹发送邮件
2020/12/22 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
Python Socket TCP双端聊天功能实现过程详解
2020/06/15 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
Magee 1866官网:Donegal粗花呢外套和大衣专家
2019/11/01 全球购物
个人素质的自我评价分享
2013/12/16 职场文书
广告创意求职信
2014/03/17 职场文书
离职报告格式
2014/11/04 职场文书
Nginx配置之实现多台服务器负载均衡
2021/08/02 Servers
Redis 操作多个数据库的配置的方法实现
2022/03/23 Redis
使用Ajax实现进度条的绘制
2022/04/07 Javascript