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

问题：使用webpack 做css 分离
步骤：

   下载：npm i extract-text-webpack-plugin@next -D
         引用：require('extract-text-webpack-plugin')
         使用：
            1、配置插件
                new ExtractTextWebpackPlugin("style/base.css")
            2、配置css-loader


版本如下：

"devDependencies": {
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "css-loader": "^5.2.4",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "html-webpack-plugin": "^5.3.1",
    "less": "^4.1.1",
    "less-loader": "^8.1.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.36.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  }

运行报错如下：



D:\245\Code\webpack\myproject\node_modules\extract-text-webpack-plugin\dist\index.js:211
         extractedChunk.index = i;
                              ^


TypeError: Cannot set property 'index' of undefined



原因：


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

解决方案：
使用mini-css-extract-plugin下载：npm install mini-css-extract-plugin --save-dev


引用：const MiniCssExtractPlugin = require('mini-css-extract-plugin');
使用：
            
  1、配置插件
         new MiniCssExtractPlugin({
            filename: '[name].css',
            chunkFilename: "[id].css"
        }),

          
  2、配置css-loader

          {
                test:/\.css$/,
                use:[MiniCssExtractPlugin.loader, 'css-loader']
            },


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

   import './style.css'


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


版本如下：

"devDependencies": {
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "css-loader": "^5.2.4",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "html-webpack-plugin": "^5.3.1",
    "less": "^4.1.1",
    "less-loader": "^8.1.1",
    "mini-css-extract-plugin": "^1.6.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.36.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"
  }

参考：https://blog.csdn.net/u010086122/article/details/115056912