Webpack html-loader打包后生成module.exports破坏HTML文件，如何解决？

这个问题我之前也碰到过，核心原因是html-loader默认会把HTML文件转换成JS模块格式（也就是你看到的module.exports = "<div> my html </div>"），而dev-server和生产构建的处理逻辑不一样：dev-server是在内存中动态处理页面，会自动把模块内容注入到页面里，不会暴露这个问题；但生产构建时如果没配合正确的插件，webpack就会直接把这个模块代码输出成HTML文件，自然就破坏了你的站点文件。

下面给你几个针对性的解决方案：

1. 配合html-webpack-plugin处理页面级HTML #

这是最常见的解决方式，html-webpack-plugin会帮你把html-loader处理后的模块内容，正确注入到HTML模板中，生成干净的最终HTML文件，不会保留module.exports代码。

首先安装插件（如果还没装）：

npm install html-webpack-plugin --save-dev

然后修改你的webpack配置：

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

module.exports = {
  // ...其他基础配置
  module: {
    // 注意webpack4+用rules替代了旧的loaders
    rules: [
      {
        test: /\.html$/,
        exclude: /node_modules/,
        use: {
          loader: 'html-loader',
          options: {
            // 原来的attrs已经废弃了，现在用sources来处理自定义属性
            sources: {
              list: [
                '...', // 保留默认的img/src、link/href等属性处理
                {
                  tag: 'img',
                  attribute: 'data-src',
                  type: 'src',
                },
              ],
            },
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 你的源HTML模板路径
      filename: 'index.html', // 输出到dist目录的文件名
    }),
  ],
};

2. 静态HTML文件用copy-webpack-plugin直接复制 #

如果你的HTML文件是不需要模块化处理的静态页面（比如一些独立的静态页面），根本不需要用html-loader处理，直接用copy-webpack-plugin复制到dist目录即可：

安装插件：

npm install copy-webpack-plugin --save-dev

配置示例：

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        // 把src/static下的所有HTML文件复制到dist目录
        { from: './src/static/*.html', to: '[name][ext]' },
      ],
    }),
  ],
};

记得调整html-loader的test规则，把这些静态HTML文件排除在外，避免被错误处理。

3. 调整html-loader的导出格式（针对HTML片段场景） #

如果你的HTML是作为组件模板的片段（比如被JS模块引入的小HTML），可以调整html-loader的导出选项，让它输出更符合你需求的格式，比如ES模块：

use: {
  loader: 'html-loader',
  options: {
    sources: { /* 你的属性配置 */ },
    esModule: true, // 输出ES模块格式，替代CommonJS的module.exports
    exportAsDefault: true, // 把内容作为默认导出
  },
},

这种情况适合HTML被JS引入的场景，不会影响页面级HTML的生成。

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