Webpack 网页包删除生产版本上的HTML注释

当我制作网页包时，如何删除HTML文件中的注释

在我做了生产内置网页，我想有没有评论的html文件

当前使用TerserPlugin/UglifyJsPlugin的解决方案仅适用于JavaScript文件

我使用了下面的regex

test:/\.html（\？.*）$/I，

，但它仍然不起作用

我运行的命令是

$npm run production

package.json文件中的脚本部分：

"scripts": {
            "production": "webpack --optimize-minimize --config production.config.js",
        },

网页包生产配置文件-production.config.js

以下内容不会删除HTML注释

    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    // style-loader
                    {
                        loader: 'style-loader'
                    },
                    // css-loader
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    },
                    // sass-loader
                    {
                        loader: 'sass-loader'
                    }]
            },
            {
                test: /\.html$/i,
                use: ['file-loader?name=[name].[ext]', 'extract-loader', 'html-loader']
//              use: [{
//                  loader: ['html-loader'],
//                  options: {
//                      minimize: true
//                  }
//              }]
            }
    ]
    },
optimization: {
        minimize: true,
        minimizer: [
          new TerserPlugin({
              // https://github.com/webpack-contrib/terser-webpack-plugin#terseroption
              test: /\.html(\?.*)?$/i,
              // 
              // https://webpack.js.org/plugins/terser-webpack-plugin/#remove-comments
            terserOptions: {
              output: {
                comments: false,
              },
            },
              extractComments: false,
          }),
        ],
    },

---

要在生产模式下删除html中的注释，需要在缩小选项put removeComments:true或类似于my isProd标志中使用插件HtmlWebpackPlugin

plugins: [
    new HTMLWebpackPlugin({
        template: './index.html',
        inject: 'body',
        minify: {
            collapseWhitespace: isProd,
            removeComments: isProd
        }
    }),
]

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

const isProd = !isDev

const optimization = () => {
const config ={
    splitChunks: {
        chunks: 'all'
    }
}

if (isProd){
    config.minimizer = [
        new OptimizeCssAssetWebpackPlugin(),
        new TerserWebpackPlugin({
            terserOptions: {
                output: {
                    comments: false,
                },
            },
        }),
    ]
} return config

}