諸行無常

IT色々お勉強中のブログ

webpack3→4でエラーになった Chunk

Chunk.jsでエラー

 10% building 3/3 modules 0 active(node:135) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
ℹ 「wds」: Project is running at http://0.0.0.0:3035/
ℹ 「wds」: webpack output is served from /packs/
ℹ 「wds」: Content not from webpack is served from /usr/local/hoge/public/packs
 78% module and chunk tree optimization unnamed compat plugin/usr/local/hoge/node_modules/webpack/lib/Chunk.js:849
        throw new Error(
        ^

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
    at Chunk.get (/usr/local/hoge/node_modules/webpack/lib/Chunk.js:849:9)

webpack v4以降、extract-text-webpack-pluginはCSSには使用すべきでは無い。代わりにmini-css-extract-pluginを使用することらしい。。。

Webpack 4 compatibility · Issue #701 · webpack-contrib/extract-text-webpack-plugin · GitHub

yarn remove extract-text-webpack-plugin
yarn add mini-css-extract-plugin

mini-css-extract-pluginに変更

-const ExtractTextPlugin = require('extract-text-webpack-plugin')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const vue = require('./loaders/vue')
@@ -60,7 +60,7 @@ module.exports = {
     ]
   },
   plugins: [
-    new ExtractTextPlugin({
+    new MiniCssExtractPlugin({

読み込みも変更で動いた

続く