Webpack打包HTML时如何去除空格与换行？

嘿，我之前在AngularJS项目搭配Webpack打包时，也碰到过HtmlWebpackPlugin的minify配置没生效、HTML模板还留着换行空格的情况，给你几个实际验证有效的解决思路：

1. 检查HtmlWebpackPlugin的minify配置是否完整且适配AngularJS语法 #

很多时候不是配置没开，而是没考虑到AngularJS的{{}}表达式会被默认的压缩规则误处理，导致压缩逻辑跳过了部分内容。你需要明确配置压缩规则，同时排除Angular表达式的干扰：

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', // 你的入口HTML模板
      filename: 'index.html',
      minify: {
        collapseWhitespace: true, // 合并空格与换行
        removeComments: true, // 移除注释
        ignoreCustomFragments: [/{{.*?}}/], // 忽略Angular表达式，避免被破坏
        preserveLineBreaks: false, // 不保留换行
        collapseInlineTagWhitespace: true, // 合并行内标签的空格
        removeEmptyAttributes: true // 移除空属性（可选）
      }
    })
  ]
};

2. 用html-loader处理所有HTML模板文件 #

如果你的AngularJS模板是分散的（比如组件模板、ng-template），仅仅靠HtmlWebpackPlugin处理入口HTML是不够的，需要用html-loader对所有.html模板文件做压缩处理，确保每个模板都被精简：

// webpack.config.js
module.exports = {
  // ...其他配置
  module: {
    rules: [
      {
        test: /\.html$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'html-loader',
            options: {
              minimize: true,
              minifyOptions: {
                collapseWhitespace: true,
                removeComments: true,
                ignoreCustomFragments: [/{{.*?}}/]
              }
            }
          }
        ]
      }
    ]
  }
};

3. 确认HtmlWebpackPlugin版本与配置匹配 #

不同版本的HtmlWebpackPlugin对minify的配置格式有差异：

• 较新版本（v5+）推荐直接用minify: true或传入完整的minify对象；
• 旧版本可能需要单独引入html-minifier包，并传入配置。

如果你的版本是v5以下，可能需要先安装依赖：

npm install html-minifier --save-dev

然后在配置中引入并使用：

const htmlMinifier = require('html-minifier');

new HtmlWebpackPlugin({
  // ...其他配置
  minify: htmlMinifier.minify,
  minifyOptions: {
    // 同上的压缩规则
  }
})

4. 排查是否有其他插件或loader干扰 #

如果你还用到了ngtemplate-loader这类Angular模板缓存的loader，要确保它的处理顺序在html-loader之后，避免压缩后的内容被二次处理还原空格。同时检查是否有其他HTML相关的插件（比如copy-webpack-plugin）直接复制未压缩的模板文件到输出目录。

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