doubleyong
管理员
管理员
  • 最后登录2021-07-30
  • 发帖数1019
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:503回复:0

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

楼主#
更多 发布于:2021-05-18 15:11
问题:使用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
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号