簡體   English   中英

使用webpack將html文件中的圖像復制到輸出目錄

[英]Copy images in html files to output directory with webpack

我正在嘗試配置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)未包含的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>

我對html-loader文檔中的看法是默認自動require在“img”標簽中找到它。 由於您正在處理“對象”標記,因此您可能希望專注於所討論的標記屬性處理功能:

您可以通過查詢參數attrs指定此加載程序應處理哪個標記屬性組合。 傳遞一個數組或以空格分隔的列表:組合。 (默認值:attrs = img:src)

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM