webpack5搭配pug使用时打包后的js与css文件路径无法加载问题求助

修复方案 #

1. 修正SCSS入口路径

项目结构中SCSS存放目录为style，配置中错误写为styles，导致样式文件无法被加载：

// 原错误配置
entry: [
    path.resolve(__dirname, 'src/index.js'),
    path.join(__dirname, 'styles/index.scss')
],
// 修复后
entry: [
    path.resolve(__dirname, 'src/index.js'),
    path.join(__dirname, 'style/index.scss')
],

更规范的写法是直接在src/index.js中引入SCSS：import '../style/index.scss'，无需在entry数组中额外声明样式入口。

2. 配置output.publicPath

webpack5默认publicPath为auto，本地加载打包文件时会出现相对路径解析错误，手动指定为相对路径即可：

output:
{
    filename: 'bundle.[contenthash].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: './' // 新增该行
},

3. 完善pug加载规则

当前pug规则未开启资源路径解析，导致pug模板中引入的静态资源无法被webpack识别：

// 原错误配置
{
    test: /\.(pug)$/,
    use: ['html-loader', 'pug-html-loader']
},
// 修复后
{
    test: /\.pug$/,
    use: [
        {
            loader: 'html-loader',
            options: {
                sources: true
            }
        },
        {
            loader: 'pug-html-loader',
            options: {
                pretty: true
            }
        }
    ]
},

4. 兼容file-loader与webpack5原生资源处理

webpack5默认启用Asset Module处理静态资源，与file-loader同时使用会导致路径重复生成，所有使用file-loader的规则需要新增type: 'javascript/auto'配置，以图片规则为例：

{
    test: /\.(jpg|png|gif|svg)$/,
    type: 'javascript/auto', // 新增该行
    use: [
        {
            loader: 'file-loader',
            options: {
                outputPath: 'assets/images/'
            }
        }
    ]
},

模型、字体等其他使用file-loader的规则都需要加上该行配置。

5. 修正环境判断逻辑

当前IS_DEVELOPMENT被硬编码为字符串'dev'，三元判断永远为真，无法根据环境切换输出文件名，建议改为从环境变量读取：

const IS_DEVELOPMENT = process.env.NODE_ENV === 'development'

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