webpack4でsassを別ファイルとして出力させたいのにエラーがでてしまった #JavaScript

概要

sassをjsにバンドルさせるのではなく、外部ファイルとして<link rel="stylesheet" href="style.css">な感じでhtmlで読み込ませるようにしたいなぁと思いました。

srcでsassを入力し、distなりビルド後のファイルとしてstyle.css出力するかたちにしたかったのですが、どうにも下記のエラーが出てしまいコンパイルが止まってしまうのです。

問題のエラー文

(node:7683) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
/Users/[プロジェクトパス]/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 (/Users/[プロジェクトパス]/node_modules/webpack/lib/Chunk.js:849:9)
    at /Users/[プロジェクトパス]/node_modules/extract-text-webpack-plugin/dist/index.js:176:48
    at Array.forEach (<anonymous>)
    at /Users/[プロジェクトパス]/node_modules/extract-text-webpack-plugin/dist/index.js:171:18
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/[プロジェクトパス]/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook (/Users/[プロジェクトパス]/node_modules/tapable/lib/Hook.js:154:20)
    at Compilation.seal (/Users/[プロジェクトパス]/node_modules/webpack/lib/Compilation.js:1244:27)
    at hooks.make.callAsync.err (/Users/[プロジェクトパス]/node_modules/webpack/lib/Compiler.js:624:17)
    at _err0 (eval at create (/Users/[プロジェクトパス]/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:11:1)
    at _addModuleChain (/Users/[プロジェクトパス]/node_modules/webpack/lib/Compilation.js:1095:12)
    at processModuleDependencies.err (/Users/[プロジェクトパス]/node_modules/webpack/lib/Compilation.js:1007:9)
    at process._tickCallback (internal/process/next_tick.js:61:11)

環境

"dependencies": {
    "axios": "^0.18.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "vue": "^2.5.22"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "autoprefixer": "^9.4.7",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.0",
    "eslint": "^5.13.0",
    "eslint-loader": "^2.1.1",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "postcss-loader": "^3.0.0",
    "vue-loader": "^15.6.2",
    "vue-router": "^3.0.2",
    "vue-template-compiler": "^2.5.22",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": "^3.1.14"
  }

解決策

https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/760
ドンピシャなものがgithubのissueに上がっていました。

メモ

こちら、数ヶ月前の下書きで、具体的な解決方法を忘れてしまいました;;

上記githubには

Solution: npm i -D extract-text-webpack-plugin@next

と書いてあるので、これを参考にしたと思うのですが
またwebpack使用時に思い出したら確実な結果を追記したいと思います。

とりあえず、苦労して見つけた解決策のような気がしたので備忘録として残しておきます。