Question

我正在尝试配置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>

Answer 1

我对in the html-loader documentation所看到的内容是，它默认会自动require在＆＃34; img＆＃34;标签。因为你正在处理一个＆＃34;对象＆＃34;您可能希望将重点放在所讨论的标记属性处理功能上：

您可以指定应处理哪个标记属性组合这个加载器通过查询参数attrs。传递数组或以空格分隔的列表：组合。（默认： ATTRS = IMG：SRC）

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

我试图做的事情：

1 个答案: