我正在尝试配置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不能识别 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>
1 回答
我对in the html-loader documentation的看法是，它将默认自动
require在"img"标签中找到它 . 由于您正在处理"object"标记，因此您可能希望关注所讨论的 tag-attribute processing 功能：