ERROR in ./src/css/index.scss Module build failed: Error: “extract-text-webpack-plugin“ loader is

你的名字 2022-12-25 08:52 291阅读 0赞

## webpack抽离css报错，extract-text-webpack-plugin ##

ERROR in ./src/css/index.scss  
Module build failed: Error: “extract-text-webpack-plugin” loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example  
at Object.pitch (D:\\demo\_test\\webpackDemo\\node\_modules\\extract-text-webpack-plugin\\dist\\loader.js:57:11)  
@ ./src/js/index.js 3:0-28  
Child html-webpack-plugin for “index.html”:

ERROR in ./src/css/index.scss
    Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin, refer to https://github.com/webpack/extract-text-webpack-plugin for the usage example
        at Object.pitch (D:\demo_test\webpackDemo\node_modules\extract-text-webpack-plugin\dist\loader.js:57:11)
     @ ./src/js/index.js 3:0-28
    Child html-webpack-plugin for "index.html":

## 解决方法： ##

### 第一步： ###

可能原因是`webpack`版本和`extract-text-webpack-plugin`版本不对应

"extract-text-webpack-plugin": "^3.0.2",
    "webpack": "^3.12.0",
    "webpack-dev-server": "^1.14.1"

### 第二步： ###

`Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin`  
`错误：“extract text webpack plugin”加载程序在没有相应插件的情况下使用`

module: { 
    	rules: [
    	  { //css loader 这个地方根据使用的loader配置，我使用的是sass
    		test: /\.(css|s[ac]ss)$/,
    		use: ExtractTextPlugin.extract({ 
    		  fallback: 'style-loader',
    		  use: ['css-loader', 'sass-loader', 'postcss-loader']
    		})
    	  }
    	]
    },
    // 我的原因是：没有配置下面这个，指定抽离的目录
    plugins: [
        new ExtractTextPlugin({  //提取css
          filename: 'css/[name].[hash].css',
          disable: false,
          allChunks: true
        })
      ]