如何停止Webpack对HTML进行压缩？

Question

我已经阅读了Webpack文档的一部分，其中解释了为什么在使用module.loaders语法设置加载器时，Webpack会对HTML进行缩小。但我找不到任何地方说明如何停止这个功能。我正在使用pug-loader和html-webpack-plugin来处理我的模板，但Webpack总是将它们输出为缩小的HTML。

我该如何停止这个功能？

{
  test: /\.pug$/,
  use: 'pug-loader'
}

new HtmlWebpackPlugin({
  title: 'Home',
  filename: 'index.html',
  template: './src/index.pug',
  inject: 'head',
  chunks: ['app'],
  hash: true
}),

- Dan

Answer 1

有一个选项可以用于html-webpack-plugin。 minify: false。你试过添加它吗？

https://github.com/jantimon/html-webpack-plugin#configuration

- imjared

---

我已经尝试过了，但是dist文件夹中的文件仍然被压缩了。 - Dan

Answer 2

这个问题可能会对你有所帮助。

loaders: [
    {
      test: /\.pug$/,
      exclude: /(node_modules)/,
      loader: "pug-html",
      query: {
        pretty: true
      }
    }
  ]

- blackmiaool

---

这是使用 pug-html-loader 插件。 - Dan

虽然pug-loader也提供了这个选项并且可以工作，所以谢谢！ - Dan

Answer 3

下面的命令适用于 npm run dev 和 npm run prod 两种情况。

    module: {
        rules: [{
            test: /\.pug$/,
            use: [
                'html-loader?minimize=false', 
                'pug-html-loader?pretty=true'
            ]
        }]
    },

- mufaddal_mw

Answer 4

这对我有效：

rules: [{
    test: /\.pug$/,
    use: [
        {
           loader: 'html-loader',
           options: {
                minimize: false
           }
        },
        {
            loader: 'pug-html-loader',
            options: {
                pretty: true
            }
        }
    ],
}],               

- Heyran.rs

---

即使在生产环境中也能使用 optimization: { minimizer ... } 吗？ - ztom