babel 7.x 和 webpack 4.x 配置vue项目

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()]

参考资料

升级指南 Upgrade to Babel 7
Setting up a Vue.js Project with webpack 4 and Babel 7
使用 Webpack 4 和 Babel 7 从头开始创建 React 应用程序