Webpack在生产打包时删除HTML注释

Question

如何在Webpack生产构建时删除HTML文件中的注释？

在Webpack进行生产构建后，我希望HTML文件不含注释。

目前使用TerserPlugin/UglifyJsPlugin仅适用于JavaScript文件的解决方案是否可行？

我使用以下正则表达式test: /\.html(\?.*)?$/i,，但它仍然无法工作。

我运行的命令是$ npm run production package.json文件中的scripts部分：

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

Webpack生产环境配置文件 - 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,
          }),
        ],
    },

- Matthew C

Answer 1

在生产模式下删除HTML中的注释，需要使用插件HtmlWebpackPlugin。

在其“minify”选项中加入“removeComments: true”，或者像我使用的“isProd”标志一样执行。

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;
};

- Batyodie