Webpack无法加载CSS、图片、字体，引入CSS报Automatic publicPath不支持错误

问题原因 #

Automatic publicPath is not supported in this browser报错来自Webpack 5的asset/resource模块特性：当你没有手动配置publicPath时，Webpack会尝试自动推导资源加载路径，如果你是直接打开本地HTML文件（file协议访问）或者部署路径不符合自动推导规则，就会触发该错误，同时会阻塞后续JS和CSS资源的加载。

解决方案 #

1. 修改webpack.config.js配置 #

在output配置项中手动添加publicPath字段，直接设为相对路径./即可适配本地测试和大多数部署场景：

const path = require('path');

module.exports = {
    entry: './src/index.js',
    mode: 'development',
    output: {
        filename: "main.js",
        path: path.resolve(__dirname,"dist"),
        // 新增这一行手动指定资源加载根路径
        publicPath: './'
    },
    module:{
        rules:[
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|svg|jpg|jpeg|gif)$/i,
                type: "asset/resource",
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: "asset/resource",
            },
        ],
    },
};

2. 重新构建测试 #

修改配置后重新执行npm run build，取消index.js中import './style.css';的注释即可正常加载CSS资源。

开发场景优化（可选） #

如果是日常开发调试，建议使用webpack-dev-server替代webpack --watch，避免本地file协议访问带来的各类路径问题：

• 安装依赖：执行npm install webpack-dev-server --save-dev
• 在webpack.config.js中追加开发服务配置：

module.exports = {
  // 其他原有配置保持不变
  devServer: {
    static: './dist',
    hot: true,
    open: true
  }
}

• 修改package.json的scripts配置：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "dev": "webpack serve",
  "build": "webpack"
}

之后开发阶段执行npm run dev即可自动打开浏览器预览，不会出现路径相关报错。

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