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做拖动布局的思路
May 31 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
Nov 28 Javascript
Js四则运算函数代码
Jul 21 Javascript
异步javascript的原理和实现技巧介绍
Nov 08 Javascript
javascript无刷新评论实现方法
May 13 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
五步轻松实现zTree的使用
Nov 01 Javascript
js保留两位小数方法总结
Jan 31 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
vue自定义表单生成器form-create使用详解
Jul 19 Javascript
JavaScript简单编程实例学习
Feb 14 Javascript
Vue实现简易计算器
Feb 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
珊瑚虫IP库浅析
2007/02/15 PHP
PHP If Else(elsefi) 语句
2013/04/07 PHP
解析使用ThinkPHP应该掌握的调试手段
2013/06/20 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
js实现网站首页图片滚动显示
2013/02/04 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
BootstrapTable请求数据时设置超时(timeout)的方法
2017/01/22 Javascript
angular中实现li或者某个元素点击变色的两种方法
2017/07/27 Javascript
javascript字体颜色控件的开发 JS实现字体控制
2017/11/27 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
JS实现斐波那契数列的五种方式(小结)
2020/09/09 Javascript
python文件读写并使用mysql批量插入示例分享(python操作mysql)
2014/02/17 Python
Python使用回溯法子集树模板解决爬楼梯问题示例
2017/09/08 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
Python list列表中删除多个重复元素操作示例
2019/02/27 Python
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
中专生自荐信
2013/10/12 职场文书
数控专业个人求职信范例
2013/11/29 职场文书
正风肃纪剖析材料
2014/02/18 职场文书
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
二手房买卖协议书
2014/04/10 职场文书
师德师风自查材料
2014/10/14 职场文书
沈阳故宫导游词
2015/01/31 职场文书
五星级酒店宣传口号
2015/12/25 职场文书
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python
Python中request的基本使用解决乱码问题
2022/04/12 Python
Python tensorflow卷积神经Inception V3网络结构
2022/05/06 Python