升级Webpack 4后使用CSS Modules报TypeError: Cannot read property 'context' of undefined

问题诊断 #

从你提供的错误栈来看，这个问题出在css-loader的执行流程中，无法读取context属性，大概率是Webpack 4与当前使用的css-loader、postcss-loader版本不兼容，或者postcss-loader的配置写法不符合Webpack 4的规范导致的。

分步解决方案 #

1. 升级适配Webpack 4的Loader版本

Webpack 4对loader的版本有特定要求，旧版本的css-loader/postcss-loader在Webpack 4环境下会出现上下文传递的问题。先卸载旧版本，安装兼容的稳定版：

npm uninstall css-loader postcss-loader style-loader
npm install --save-dev css-loader@3.6.0 postcss-loader@3.0.0 style-loader@1.3.0

2. 重构PostCSS配置（推荐方式）

Webpack 4中不建议直接在webpack.config.js里内嵌PostCSS插件配置，改用单独的postcss.config.js文件来管理，这样能避免上下文传递错误：
在项目根目录创建postcss.config.js：

const autoprefixer = require('autoprefixer');
const importPlugin = require('postcss-import');
const postcssFunctions = require('postcss-functions')({
  functions: require('./postcss-functions')
});

module.exports = {
  plugins: [
    importPlugin(),
    autoprefixer({ browsers: ['last 2 versions'] }),
    postcssFunctions
  ]
};

然后修改webpack.config.js中CSS规则里的postcss-loader配置，简化为：

{
  loader: 'postcss-loader',
  options: {
    sourceMap: true // 和css-loader的sourceMap保持一致，可选
  }
}

3. 移除Webpack 4中已废弃的插件

你的配置里包含两个Webpack 4已经内置的废弃插件，它们可能会干扰构建流程，直接删除：

// 删掉这两行
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.NoEmitOnErrorsPlugin(),

Webpack 4会根据你设置的mode（production/development）自动启用对应的优化策略，无需手动添加这些插件。

4. 验证最终CSS规则配置

修改后的CSS规则应该是这样的：

{
  test: /\.css$/i,
  include: /client/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        sourceMap: true,
        modules: true,
        importLoaders: 1,
        camelCase: true,
        localIdentName: '[name]__[local]___[hash:base64:5]',
      },
    },
    {
      loader: 'postcss-loader',
      options: {
        sourceMap: true
      },
    },
  ],
},

原因说明 #

• Webpack 4重构了loader的上下文传递机制，旧版本的css-loader无法正确处理postcss-loader传递的上下文，导致context属性未定义的报错。
• 单独的postcss.config.js文件会被PostCSS自动加载，避免了在Webpack配置中嵌套插件导致的上下文丢失问题。
• 废弃的插件在Webpack 4中已经被内置优化替代，保留它们可能会引发不必要的冲突。

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