很偶然的今天想開個自己的小項目，記錄一下最近項目工程上實現的一個小交互。按照之前運行非常流暢的配置走一遍，打包遇到各種坑。只好根據命令行的報錯逐個排查，發現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 = config2.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"]
(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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
