使用 webpack 将 html 文件中的图像复制到输出目录答案

【问题标题】：Copy images in html files to output directory with webpack使用 webpack 将 html 文件中的图像复制到输出目录
【发布时间】：2016-07-05 21:03:46
【问题描述】：

我正在尝试配置 webpack，以便它解析我的 index.html（最好使用 HTMLWebpack 插件），以便将任何包含的图像（例如 <object data="images/test.svg">）移动到我的输出文件夹，文件夹路径保持不变。最终，运行 webpack-dev-server 应该会呈现一个显示我的图像的页面。

This 问题有些相关，但与我自己的问题不太相符。

我想做什么：

从我的配置文件中可以看到，I tried using the html-loader。如果没有exclude: /index\.html$/，它会给我一个错误。我的猜测是 HTMLWebpack 插件和 html-loader 不能相处。排除 index.html 违背了 html-loader 的目的。文件加载器无法识别使用 require(image) 未包含的图像。

目前发生的情况：一切正常，但没有图像文件夹，/dist/ 中也没有任何图像。

我目前的 webpack.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: './app/index.js',

  output: {
    path: __dirname + '/dist',
    publicPath: '/dist',
    filename: 'index_bundle.js'
  },

  module: {
    loaders: [
    { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'},
    { test: /\.svg$/, loader: 'file-loader' },
    { test: /\.html$/, exclude: /index\.html$/, loader: 'html-loader'}
    ]
  },

  plugins: [
    HTMLWebpackPluginConfig
  ]
}

示例 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
</head>
<body>
    <div id="demoSpace"><object data="images/test.svg"  type="image/svg+xml"></object></div>
    <div id="test"></div> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">      
    </script>
</body>
</html>

【问题讨论】：

标签： javascript html webpack webpack-dev-server html-webpack-plugin

【解决方案1】：

我对我看到的in the html-loader documentation 的看法是，它将默认为自动requireing 它在“img”标签中找到的内容。由于您正在处理“对象”标签，因此您可能需要关注所讨论的 标签属性处理 功能：

您可以指定应由哪个标签-属性组合处理这个加载器通过查询参数 attrs。传递一个数组或一个 : 组合的空格分隔列表。（默认： attrs=img:src)

【讨论】：