首页 文章

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

提问于
浏览
0

我有 webpack (v3.5.6)构建使用 html-loader 并处理多个HTML文件,使用 url-loader 将较小的图像嵌入到HTML中 . 配置完全适用于构建,但在使用 Webpack Dev Server (v2.7.1)时失败,因为此时 Webpack Dev Server 不存在't seem to ignore comments in source HTML files. It tries to require resources from commented sections of HTML and some of those resources don't .

以下是 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');

1 回答

  • 1

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

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

相关问题