如何解决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.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 

我的（未完成的）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型装载机配置激活评论缩小。

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