webpack - 如何修复 Webpack Dev Server 不忽略 HTML 文件注释的问题？

Question

我有一个webpack (v3.5.6) 使用 html-loader 构建并处理多个 HTML 文件，使用 url-loader 将较小的图像嵌入到 HTML 中。该配置非常适合构建，但在使用 Webpack Dev Server 时失败(v2.7.1)，自 Webpack Dev Server似乎并没有忽略源 HTML 文件中的注释。它尝试从 HTML 的注释部分获取资源，但其中一些资源目前不存在。

这是来自 Webpack Dev Server 的示例错误:

ERROR in ./about-us.htmlModule not found: Error: Can't resolve './img/old-image.png' in 'C:\Users\usr\dev\www' @ ./about-us.html @ ./entry.js @ multi (webpack)-dev-server/client?http://localhost:8080 ./entry.js

我的(未完成)webpack配置如下:

webpack.common.js:

const path = require('path');const webpack = require('webpack');const CleanWebpackPlugin = require('clean-webpack-plugin');const env = process.env.NODE_ENV;module.exports = {  entry: './entry.js',  output: {    path: path.resolve(__dirname, 'dist'),    filename: 'bundle.js'  },  module: {    rules: [{        test: /\.html$/,        use: [          {            loader: 'file-loader',            options: {              name: '[name].[ext]',            },          },          {            loader: 'extract-loader',          },          {            loader: 'html-loader',            options: {              attrs: ['img:src'],              interpolate: true,            },          },        ],      },      {        test: /\.js$/,        exclude: /(node_modules)/,        use: {          loader: 'babel-loader',          options: {            presets: ['env']          }        }      },      {        test: /\.css$/,        use: env === 'production' ?          ExtractTextPlugin.extract({            fallback: 'style-loader',            use: ['css-loader']          }) : ['style-loader', 'css-loader']      },      {        test: /\.(png|jpg|gif|svg)$/,        use: [{          loader: 'url-loader',          options: {            limit: 8192,            name: '[path][name].[ext]'          }        }]      }    ]  },  resolve: {    alias: {      'vue$': 'vue/dist/vue.common.js',    },  },  plugins: [    new CleanWebpackPlugin(['dist', 'build'])  ],};

webpack.dev.js:

const merge = require('webpack-merge');const common = require('./webpack.common.js');module.exports = merge(common, {  devServer: {    contentBase: './dist'  },});

webpack.prod.js:

const merge = require('webpack-merge');const UglifyJSPlugin = require('uglifyjs-webpack-plugin');const ExtractTextPlugin = require("extract-text-webpack-plugin");const common = require('./webpack.common.js');module.exports = merge(common, {  plugins: [    new UglifyJSPlugin(),    new ExtractTextPlugin({      filename: 'styles.css'    })  ]});

entry.js:

require('./about-us.html');require('./index.html');require('./css/style.css');require('./js/sidebar.js');

Answer 1

您必须在 html-loader 的配置中激活注释缩小功能。

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