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

Question

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

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

./about-us.html 中的错误 未找到模块：错误：无法解析 'C:\Users\usr\dev\www' 中的 './img/old-image.png' @ ./about-us.html @ ./entry.js @multi (webpack)-dev-server/client?http://localhost:8080 ./entry.js

我的（未完成）webpack 配置如下：

webpack.common.js：

常量路径 = 要求（'路径'）; 常量 webpack = require('webpack'); 常量 CleanWebpackPlugin = require('clean-webpack-plugin'); 常量 env = process.env.NODE_ENV; 模块.exports = { 条目：'./entry.js', 输出： { 路径：path.resolve(__dirname, 'dist'), 文件名：'bundle.js' }, 模块： { 规则：[{ 测试：/\.html$/， 采用： [ { 加载器：'文件加载器'， 选项： { 名称：'[名称]。[分机]'， }, }, { 装载机：'提取装载机'， }, { 加载器：'html-loader'， 选项： { attrs: ['img:src'], 插值：真， }, }, ], }, { 测试：/\.js$/， 排除：/（node_modules）/， 采用： { 加载器：'babel-loader'， 选项： { 预设：['env'] } } }, { 测试：/\.css$/， 使用： env === '生产' ？ ExtractTextPlugin.extract({ 后备：'样式加载器'， 使用：['css-loader'] }) : ['style-loader', 'css-loader'] }, { 测试：/\.(png|jpg|gif|svg)$/, 采用： [{ 加载器：'url-loader'， 选项： { 限制：8192， 名称：'[路径][名称]。[分机]' } }] } ] }, 解决： { 别名：{ 'vue$': 'vue/dist/vue.common.js', }, }, 插件：[ 新的 CleanWebpackPlugin(['dist', 'build']) ], };

webpack.dev.js：

常量合并 = 要求（'webpack-merge'）; const common = require('./webpack.common.js'); module.exports = 合并（常见，{ 开发服务器：{ contentBase: './dist' }, });

webpack.prod.js：

常量合并 = 要求（'webpack-merge'）; const UglifyJSPlugin = require('uglifyjs-webpack-plugin'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); const common = require('./webpack.common.js'); module.exports = 合并（常见，{ 插件：[ 新的 UglifyJSPlugin(), 新的 ExtractTextPlugin({ 文件名：'styles.css' }) ] });

entry.js：

要求（'./about-us.html'）; 要求（'./index.html'）; 要求('./css/style.css'); 要求（'./js/sidebar.js'）;

Answer 1

您必须在 html-loader 的配置中激活评论缩小。

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