Webpack 文件加载器发出的文件在输出包中的位置？_Webpack_Webpack Dev Server_Webpack Style Loader_Webpack File Loader

Webpack 文件加载器发出的文件在输出包中的位置？

webpack

Webpack 文件加载器发出的文件在输出包中的位置？,webpack,webpack-dev-server,webpack-style-loader,webpack-file-loader,Webpack,Webpack Dev Server,Webpack Style Loader,Webpack File Loader,我有一个简单的Hello World类型的web应用程序。它只显示带有背景图像的文本“Hello，World！”。该应用程序的工作如预期，但我想更好地了解图像是如何捆绑和服务的当我运行webpack dev server时，我看到我的背景图像pattern.svg作为e78b56161e0911af1eae4c8c3de25c4.svg发出： Asset Size Chunks Chunk Na

我有一个简单的Hello World类型的web应用程序。它只显示带有背景图像的文本“Hello，World！”。该应用程序的工作如预期，但我想更好地了解图像是如何捆绑和服务的

当我运行

webpack dev server

时，我看到我的背景图像

pattern.svg

作为

e78b56161e0911af1eae4c8c3de25c4.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:[我的端口]/E78B56161E0911AF1EAE4C8C3DE25C4.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:[我的端口]/E78B56161E0911AF1EAE4C8C3DE25C4.svg

？图像在webpack的输出包中位于何处，服务器如何知道映射

http://localhost:[我的端口]/E78B56161E0911AF1EAE4C8C3DE25C4.svg

到该图像？参考请参见以下相关文件的内容

/app/index.html /app/styles/main.css /webpack.config.js

...
<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
  ]
}