我有一个简单的 Hello World 类型的Web应用程序。它只显示文字＆＃34; Hello，World！＆＃34;与背景图像。该应用程序按预期工作，但我想更好地了解如何捆绑和提供图像。
当我运行webpack-dev-server时，我发现我的背景图片pattern.svg以e78b561561e0911af1eae4c8c3de25c4.svg的形式发出：
Asset Size Chunks Chunk Names
e78b561561e0911af1eae4c8c3de25c4.svg 27.7 kB [emitted]
index_bundle.js 748 kB 0 [emitted] main
index.html 435 bytes [emitted]
如果我访问http://localhost:[my-port]/e78b561561e0911af1eae4c8c3de25c4.svg，图片将按预期投放。但是，如果我查看我的dist文件夹中的webpack输出，我只会看到两个文件：
# ls -al dist
total 260
drwxr-xr-x 2 root root 45 Oct 17 15:43 .
drwxr-xr-x 6 root root 132 Oct 17 15:58 ..
-rw-r--r-- 1 root root 435 Oct 17 15:43 index.html
-rw-r--r-- 1 root root 260176 Oct 17 15:43 index_bundle.js
当我请求http://localhost:[my-port]/e78b561561e0911af1eae4c8c3de25c4.svg时会发生什么？图像在webpack的输出包中的位置，以及服务器如何知道将http://localhost:[my-port]/e78b561561e0911af1eae4c8c3de25c4.svg映射到此图像？供参考，请参阅以下相关文件的内容。
...
<body>
<div id='app' />
</body>
...
var React = require('react');
var ReactDOM = require('react-dom');
require('./styles/main.css');
...
#app {
background-image: url('../images/pattern.svg');
}
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: 'dist',
filename: 'index_bundle.js'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(svg)$/i,
loader: 'file'
}
]
},
plugins: [
HtmlWebpackPluginConfig
]
}