1

我有一个简单的Hello World类型的 Web 应用程序。它只是显示文本“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？图像在 webpack 的输出包中的位置，服务器如何知道映射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
  ]
}
4

0 回答 0