extract-text-webpack-plugin 打包css报错的解决

全局安装的webpack版本是v4.12.1，但是package.json引用的webpack版本是v3.6.0，install下来/node_modules/里面webpack版本是v3.12.0。
在控制台输入webpack -v，得到的结果是4.12.1。
这是webpack环境。

开始引入extract-text-webpack-plugin，默认的版本是v3.0.2，运行webpack报错：

$ webpack
(node:18800) DeprecationWarning: Tapable.plugin is deprecated. Use new API on `.hooks` instead
C:\Users\EEE\AppData\Roaming\npm\node_modules\webpack\lib\Chunk.js:752
                throw new Error(
                ^

Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead

找了很多文章，都说是版本问题，下载了extract-text-webpack-plugin 4.0.0-beta.0版本，运行还是报错：

$ webpack
C:\Users\EEE\Desktop\webpack\node_modules\[email protected]@extract-text-webpack-plugin\dist\index.js:217
            extractedChunk.addGroup(chunkGroup);
                           ^

TypeError: extractedChunk.addGroup is not a function

猜想会不会是webpack版本也需要升级，我删掉了package.json引用的webpack，打算使用全局webpack。
重新install，运行webpack，还是报错：

$ webpack
C:\Users\EEE\AppData\Roaming\npm\node_modules\webpack-cli\bin\cli.js:244
                                throw err;
                                ^

Error: Cannot find module 'webpack/lib/Chunk'

似乎必须要引入webpack，在package.json再次引webpack，v4.12.0。
得到的/node_modules/下的webpack版本是v4.26.1。
再次执行webpack，这次成功了。

这是一次很简单的采坑，但是前后困扰了我好几天。
附配置文件：

webpack.config.js

const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/dist/',
        filename: 'bundle.js'
    },
    mode: 'production',
    module: {
      rules: [
        {
          test: /\.css$/,
          //loader: ['style-loader','css-loader']
          use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader"
          })
        },
        {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          loader: 'url-loader',
          options: {
            limit: 10000*4,
            name: '[name].[ext]?[hash]'
          }
        }
      ]
    },
    plugins: [
      new ExtractTextPlugin("styles.css"),
    ]
};

package.json

{
  "devDependencies": {
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.4",
    "style-loader": "^0.23.1",
    "url-loader": "^0.5.8",
    "webpack": "^4.12.0"
  }
}