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

Question

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

Vey*_*Vey 6 html javascript webpack webpack-dev-server html-webpack-plugin

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

这个问题有些相关，但与我自己的问题不太匹配。

我试图做的是：

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

当前正在发生的事情：一切运行正常，但是没有images文件夹，也没有任何图像/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
  ]
}

Run Code Online (Sandbox Code Playgroud)

示例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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Joh*_*Mee 0

我对html-loader 文档中看到的内容的看法是，它将默认自动require查找在“img”标签中找到的内容。由于您正在处理“对象”标签，您可能希望关注所讨论的标签属性处理功能：

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

归档时间：	9 年，8 月前
查看次数：	1811 次
最近记录：	6 年，1 月前