如何在Webpack 4中使用Sass Loader？解决ExtractTextPlugin兼容问题

我太懂你查了一堆资料结果踩坑的感觉了——ExtractTextPlugin确实已经被Webpack官方弃用，完全不兼容Webpack 4版本。现在官方推荐用mini-css-extract-plugin来实现CSS提取的需求，下面我帮你调整配置，顺便讲清楚关键变化：

第一步：安装替代插件 #

打开终端执行命令，把插件安装到开发依赖中：

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

第二步：修改你的 webpack.config.js #

直接替换成下面的代码，我保留了你原有的ClosureCompilerPlugin配置位置，同时适配了Webpack 4的要求：

const path = require('path');
const ClosureCompilerPlugin = require('webpack-closure-compiler');
// 引入新的CSS提取插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          // 替换原有的style-loader，用插件自带loader负责提取CSS到单独文件
          MiniCssExtractPlugin.loader,
          { loader: "css-loader" },
          { loader: "sass-loader" }
        ]
      }
    ]
  },
  plugins: [
    // 配置CSS提取规则，可根据项目需求调整文件名格式
    new MiniCssExtractPlugin({
      filename: '[name].css',
      chunkFilename: '[id].css'
    }),
    // 保留你原有的ClosureCompilerPlugin，记得补全内部配置细节
    new ClosureCompilerPlugin({ 
      compiler: {
        // 示例配置，可根据你的需求修改
        language_out: 'ECMASCRIPT_2015',
        compilation_level: 'ADVANCED'
      }
    })
  ]
}

几个关键说明 #

• mini-css-extract-plugin是Webpack官方针对4.x及以上版本推出的替代方案，不仅能稳定提取CSS到单独文件，还支持代码分割、按需加载等现代化构建特性，比老的ExtractTextPlugin适配性更强。
• 开发环境可以灵活切换：如果是开发阶段，你可以继续用style-loader（它能把CSS注入DOM实现热更新），生产环境再换成mini-css-extract-plugin提取文件，提升开发体验。可以通过环境变量来区分两种配置。

内容的提问来源于stack exchange，提问作者Max