extract-text-webpack-plugin：TypeError: Cannot set property ‘index‘ of undefined 解决办法

一. 问题背景

cnpm install extract-text-webpack-plugin@next

在用如上命令安装extract-text-webpack-plugin插件时，会有日志如下：

可以看到提示说extract-text-webpack-plugin需要webpack3到4的版本，但是我webpack装的是5.27版本，因此可能会有问题。

果然在用npm run dev时，报错：

E:\WorkSpace\H5\vue\learn\webpack_demo\node_modules_extract-text-webpack-plugin@4.0.0-beta.0@extract-text-webpack-plugin\dist\index.js:211
extractedChunk.index = i;
^

TypeError: Cannot set property ‘index’ of undefined
at E:\WorkSpace\H5\vue\learn\webpack_demo\node_modules_extract-text-webpack-plugin@4.0.0-beta.0@extract-text-webpack-plugin\dist\index.js:211:32

二. 解决办法

1.原因分析

上网搜了搜，感觉对于webpack5以上的版本，用extract-text-webpack-plugin已经不行了，只能用mini-css-extract-plugin代替，

2修改方法：

执行npm

cnpm install mini-css-extract-plugin --save-dev

执行完毕后，package.json中新增如下：

 "devDependencies": {
    "css-loader": "^5.1.3",
    "extract-text-webpack-plugin": "^3.0.2",
    "mini-css-extract-plugin": "^1.3.9",
    "style-loader": "^2.0.0",
    "webpack": "^5.27.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  }

修改webpack.config.js：

var path = require('path');

//用插件
// var ExtractTextPlugin = require('extract-text-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

var config = {
    entry: {
        main: './main'
    },
    output: {
    	publicPath: '/dist/',
        path: path.join(__dirname, './dist'),
        filename: 'main.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                // use: [
                //     'style-loader',
                //     'css-loader'
                // ]
                // use: ExtractTextPlugin.extract({
                //     use: 'css-loader',
                //     fallback: 'style-loader'
                // })

                use:[MiniCssExtractPlugin.loader, 'css-loader']
            }
        ]
    }
    ,plugins: [
        // 重命名提取后的css文件
        // new ExtractTextPlugin("main.css")
        new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: "[id].css"
        })
    ]
};

module.exports = config;

最后，main.js中，需要直接加入css文件的引入

import './style.css';

则可以成功启动服务，并且使用标签引入的css文件