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

2019-11-19 11:35:56

字体：大中小

来源：转载

供稿：网友

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

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

(node:2628) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` insteadi ｢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/distF:/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-corenpm 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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：详解babel升级到7.X采坑总结

下一篇：vue轻量级框架无法获取到vue对象解决方法