使用Webpack4构建React应用时出现window is not defined错误

你遇到的window is not defined错误，核心原因是在SCSS的loader配置里同时使用了MiniCssExtractPlugin.loader和style-loader，这两个工具的作用完全互斥。

具体分析 #

• MiniCssExtractPlugin的职责是把CSS从JavaScript bundle中提取出来，生成独立的CSS文件，这个处理过程是在Node.js环境下完成的，不存在浏览器的window对象。
• 而style-loader的作用是将CSS通过JS代码动态插入到浏览器的<style>标签中，它的内部逻辑严重依赖浏览器环境的window对象。

当你同时配置这两个loader时，MiniCssExtractPlugin在编译阶段触发了style-loader的代码，此时没有浏览器环境的window，自然就抛出了这个错误。

修复方案 #

直接移除SCSS rules里的style-loader即可，修改后的module.rules中SCSS相关配置如下：

{
  test: /\.scss$/,
  use: [
    { loader: MiniCssExtractPlugin.loader },
    { loader: "css-loader" },
    { 
      loader: "sass-loader", 
      options: { includePaths: ["./node_modules"] } 
    }
  ]
}

补充优化建议 #

如果想在开发环境保留CSS热重载的便利，同时在生产环境提取独立CSS文件优化性能，可以通过环境变量区分配置：

const isProduction = process.env.NODE_ENV === 'production';
const cssLoaders = [
  isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
  'css-loader',
  { 
    loader: "sass-loader", 
    options: { includePaths: ["./node_modules"] } 
  }
];

// 后续在rules中直接使用cssLoaders数组即可

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