时间戳

首页 > 解决方案 > Webpack 删除生产构建中的 HTML 注释

webpack - Webpack 删除生产构建中的 HTML 注释

问题描述

当我进行 Webpack 生产构建时，如何删除 HTML 文件中的注释？

在 Webpack 中进行生产构建后，我想要没有注释的 html 文件。

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

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

我运行的命令是$ npm run production

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

"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,
          }),
        ],
    },

标签： webpack

解决方案

要在生产模式下删除 html 中的评论，您需要插件 HtmlWebpackPlugin，在 Minification 选项中放置 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

}

推荐阅读