Webpack5配置PostCSS+TS+React+Sass时找不到default模块如何解决

问题根因 #

你遇到的Loading PostCSS "default" plugin failed报错及关联问题由以下4个配置错误导致：

1. PostCSS配置非法引入非PostCSS插件：stylelint、stylelint-scss是Stylelint生态的工具，不符合PostCSS插件的导出规范，加入PostCSS插件列表后会触发加载失败
2. 样式Loader配置冲突+顺序错误：MiniCssExtractPlugin.loader和style-loader功能互斥（前者是把CSS抽离为独立文件，后者是把CSS注入到页面style标签），同时配置会导致样式加载异常；且Loader执行顺序为从右到左，现有配置顺序不符合编译要求
3. Babel配置语法错误：未提前声明plugins变量就直接调用push方法，会触发运行时异常
4. 启动命令未指定环境变量：导致process.env.NODE_ENV未正确赋值，生产环境专属的CSS压缩、样式裁剪等插件会在开发环境错误加载

修复方案 #

1. 修复postcss.config.js #

移除非法PostCSS插件，调整生产/开发环境的插件加载逻辑：

const plugins = [
    require('postcss-preset-env'),
    require('postcss-assets'),
    require('postcss-reporter'),
]

if (process.env.NODE_ENV !== 'development') {
    plugins.push(
        require('autoprefixer'),
        require('cssnano'),
        require('@fullhuman/postcss-purgecss'),
        require('postcss-fail-on-warn')
    )
}

module.exports = {
    plugins: plugins,
}

2. 修复webpack.dev.js的样式规则 #

移除互斥的Loader，调整顺序，开启CSS Module支持：

// 其他配置保持不变，仅修改module.rules下的scss对应规则
module: {
    rules: [
        {
            test: /\.scss$/,
            use: [
                // 开发环境用style-loader即可，不需要抽离CSS，删除MiniCssExtractPlugin相关配置
                { loader: 'style-loader' },
                {
                    loader: 'css-loader',
                    options: {
                        importLoaders: 2, // 后面还有postcss和sass两个loader，所以改成2
                        modules: true // 开启CSS Module支持，匹配你global.d.ts里的scss模块声明
                    },
                },
                { loader: 'postcss-loader' },
                { loader: 'sass-loader' },
            ],
        },
    ],
},
// 同时删除plugins数组里的MiniCssExtractPlugin实例声明
plugins: [
    new ReactRefreshWebpackPlugin(),
],

3. 修复babel.config.js #

提前声明plugins变量：

let plugins = [];
if(process.env.NODE_ENV !== "production"){
  plugins.push("react-refresh/babel")
}

module.exports = {
  presets: ["@babel/preset-env",["@babel/preset-react", {"runtime":"automatic"}], "@babel/typescript"],
  plugins: plugins,
}

4. 修复启动命令，跨平台设置环境变量 #

先安装cross-env为开发依赖：
yarn add cross-env -D
修改package.json的scripts配置：

{
  "scripts": {
    "start": "cross-env NODE_ENV=development webpack-dev-server --config webpack.dev.js --open",
    "build": "cross-env NODE_ENV=production webpack --config webpack.prod.js"
  }
}

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