[英]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.