Где находятся файлы, испускаемые загрузчиком файлов, в выходном пакете?
У меня есть простое веб-приложение типа Hello World. Он просто отображает текст "Привет, мир!" с фоновым изображением. Приложение работает, как и ожидалось, но я хотел бы лучше понять, как изображение упаковано и подается.
Когда я бегу 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, изображение подается как ожидалось. Однако, если я посмотрю на вывод Webpack в моем dist папка, я вижу только два файла:
# 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? Где изображение находится в выходном пакете веб-пакета, и как сервер узнает, что сопоставить http://localhost:[my-port]/e78b561561e0911af1eae4c8c3de25c4.svg к этому изображению? Для справки см. Содержание соответствующих файлов ниже.
/app/index.html
...
<body>
<div id='app' />
</body>
...
/app/index.js
var React = require('react');
var ReactDOM = require('react-dom');
require('./styles/main.css');
...
/app/styles/main.css
#app {
background-image: url('../images/pattern.svg');
}
/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: '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
]
}