当前位置: 首页 > 知识库问答 >
问题:

如何修复网页包开发服务器未忽略的HTML文件注释?

单于帅
2023-03-14

我有一个webpack(v3.5.6),使用html加载器构建,并将多个html文件处理到它们自己中,使用url加载器将较小的图像嵌入html中。该配置在构建时运行良好,但在使用Webpack Dev Server(v2.7.1)时失败,因为Webpack Dev Server似乎不会忽略源HTML文件中的注释。它试图从HTML的注释部分获取资源,而其中一些资源目前不存在。

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


ERROR in ./about-us.html
Module 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

我的(未完成)webpackconfig如下:

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');

共有1个答案

董子平
2023-03-14

您必须在html加载器的配置中激活注释缩放。

module: {
  rules: [{
    test: /\.html$/,
    use: [ {
      loader: 'html-loader',
      options: {
        minimize: true,
        removeComments: true,
      }
    }],
  }]
}
 类似资料:
  • 我正在AWS上运行CoreNLP专用服务器,并试图从Ruby发出请求。服务器似乎正确地接收了请求,但问题是服务器似乎忽略了input annotators列表,并且总是默认为所有annotators。我生成请求的Ruby代码如下所示: 在服务器上的nohup.out日志中,我看到以下内容: 当我在命令行上使用wget运行测试查询时,它似乎工作得很好。 任何关于为什么会发生这种情况的帮助都将被接受,

  • 问题内容: 背景 大约30分钟前,我才开始使用grunt。所以,请忍受我。 但我有一个相当简单的脚本,它将查看我的js,然后将其全部压缩到一个文件中。 码 题 我的main.min.js每次都包含在编译中。这意味着我的min.js正在获得2x,4x,8x,16x等。围绕此的最佳方法是添加异常并忽略吗? 问题答案: 在src数组的 末尾 ,添加 这将排除它。!将其变成排除对象。 http://gru

  • 本文向大家介绍发布一个npm包如何忽略不需要发布的文件?相关面试题,主要包含被问及发布一个npm包如何忽略不需要发布的文件?时的应答技巧和注意事项,需要的朋友参考一下 中的文件不会被发布

  • 问题内容: 在Python中,我刚刚阅读了一个文本文件中的一行,并且我想知道如何编写代码以忽略该行开头带有#的注释。 我认为应该是这样的: 但是我是Python的新手,我不知道语法 问题答案: 您可以使用startswith() 例如

  • 问题内容: 我想截断一些文本(从数据库或文本文件加载),但其中包含HTML,因此包含了标签,并且将返回较少的文本。然后,这可能导致标签未关闭或部分关闭(因此Tidy可能无法正常工作,并且内容仍然较少)。我如何基于文本截断(并且可能在到达表时停止,因为这可能会导致更复杂的问题)。 将导致: 我想要的是: 我怎样才能做到这一点? 虽然我的问题是有关如何在PHP中进行操作,但最好知道如何在C#中进行操作

  • 服务器没有看到我的JSON参数。我用邮差检查服务器,一切正常。