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

Question

I am trying to configure webpack so it parses my index.html (ideally with HTMLWebpack Plugin), so that any included image (eg <object data="images/test.svg"> ) is moved to my output folder, with the folder path remaining the same. 我正在尝试配置webpack，以便它解析我的index.html（理想情况下使用HTMLWebpack插件），以便任何包含的图像（例如<object data="images/test.svg"> ）被移动到我的输出文件夹，文件夹路径保持不变。 Ultimately, running webpack-dev-server should render a page that displays my images. 最终，运行webpack-dev-server应该呈现一个显示我的图像的页面。

This question is somewhat related, but doesn't quite match my own problem. 这个问题有些相关，但并不完全符合我自己的问题。

What I tried to do: 我试图做的：

As you can see from my config file, I tried using the html-loader . 从我的配置文件中可以看到，我尝试使用html-loader 。 Without the exclude: /index\\.html$/ it gives me an error. 没有exclude: /index\\.html$/它给了我一个错误。 My guess is that the HTMLWebpack Plugin and the html-loader don't get along. 我的猜测是HTMLWebpack插件和html-loader不相处。 Excluding index.html defeats the purpose of html-loader. 排除index.html会破坏html-loader的目的。 File-loader doesn't recognize images that aren't included using require(image) . 文件加载器无法识别使用require(image)未包含的require(image) 。

What is currently happening: Everything runs fine, but there's no images folder, nor any image in /dist/ . 目前正在发生什么：一切运行正常，但没有图像文件夹，也没有/dist/任何图像。

My current webpack.config.js 我目前的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
]
}

Example index.html 示例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>

Answer 1

My take on what I see in the html-loader documentation is that it will default to automatically require ing what it finds in "img" tags. 我对html-loader文档中的看法是默认自动require在“img”标签中找到它。 Since you're dealing with an "object" tag you probably want to focus on the tag-attribute processing feature discussed: 由于您正在处理“对象”标记，因此您可能希望专注于所讨论的标记属性处理功能：

You can specify which tag-attribute combination should be processed by this loader via the query parameter attrs. 您可以通过查询参数attrs指定此加载程序应处理哪个标记属性组合。 Pass an array or a space-separated list of : combinations. 传递一个数组或以空格分隔的列表：组合。 (Default: attrs=img:src) （默认值：attrs = img：src）

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

问题描述

What I tried to do: 我试图做的：

1 个解决方案

解决方案1
0 2016-11-18 06:06:17

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

问题描述

What I tried to do: 我试图做的：

1 个解决方案

解决方案1 0 2016-11-18 06:06:17

解决方案1
0 2016-11-18 06:06:17