Webpack编译HTML失败：extract-loader报错找不到main-bundle.js

核心原因 #

1. Webpack配置中output.publicPath与extract-loader预期的资源查找路径不匹配，导致loader无法定位生成的bundle文件
2. extract-loader对Webpack 5的兼容性有限，当前通过require('./index.html')的方式不符合Webpack 5推荐的资源处理流程
3. 全局与本地Webpack版本存在隐性冲突

解决方案 #

方案1：改用html-webpack-plugin处理HTML（推荐，适配Webpack 5） #

这是Webpack 5下处理HTML模板的标准方式，无需手动require HTML文件：

1. 安装依赖

npm i html-webpack-plugin --save-dev

2. 修改config/webpack.dev.js配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    filename: 'main-bundle.js',
    path: path.resolve(__dirname, '../dist'),
    publicPath: './' // 确保相对路径正确
  },
  devServer: {
    static: path.resolve(__dirname, '../dist'),
    hot: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 指定HTML模板
      filename: 'index.html'
    })
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'] // 开发环境用style-loader注入CSS
      },
      {
        test: /\.html$/,
        use: ['html-loader'] // 仅保留html-loader处理模板中的资源引用
      }
    ]
  }
};

3. 修改src/main.js，删除HTML的require语句

require('./main.css');
// 移除 require('./index.html')

4. 启动开发服务

npm run dev

方案2：调整extract-loader配置（兼容原有流程） #

如果必须保留extract-loader，需修正loader链和路径配置：

1. 修改Webpack的HTML loader规则

{
  test: /\.html$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: './'
      }
    },
    {
      loader: 'extract-loader',
      options: {
        publicPath: './' // 与output.publicPath保持一致
      }
    },
    {
      loader: 'html-loader',
      options: {
        esModule: false // 禁用ES模块，适配extract-loader的CommonJS处理逻辑
      }
    }
  ]
}

2. 确保output配置的publicPath为./，避免绝对路径导致的查找错误
3. 移除全局Webpack依赖，仅使用本地版本

npm uninstall -g webpack webpack-cli webpack-dev-server

在package.json中添加启动脚本：

"scripts": {
  "dev": "webpack serve --config config/webpack.dev.js"
}

关键注意事项 #

• Webpack 5官方推荐使用asset模块替代file-loader/extract-loader，后者对Webpack 5的支持已逐渐停滞
• 始终优先使用本地依赖，避免全局与本地版本冲突引发的异常

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