3

我有一个webpack（v3.5.6）构建，使用html-loader多个 HTML 文件并将其处理到自身中，使用url-loader. 该配置非常适合构建，但在使用Webpack Dev Server(v2.7.1) 时失败，因为Webpack Dev Server似乎没有忽略源 HTML 文件中的注释。它试图从 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'）;
4

1 回答 1

6

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

module: {
  rules: [{
    test: /\.html$/,
    use: [ {
      loader: 'html-loader',
      options: {
        minimize: true,
        removeComments: true,
      }
    }],
  }]
}
于 2018-01-01T09:49:33.617 回答