很偶然的今天想開個自己的小項目，記錄一下最近項目工程上實現的一個小交互。按照之前運行非常流暢的配置走一遍，打包遇到各種坑。只好根據命令行的報錯逐個排查，發現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'.