如何创建使用webpack

Question

我使用webpack构建字体并希望使用它，但它失败了。我的css是：

@font-face {
  font-family: 'DigitalDismay';
  src: url('../fonts/DigitalDismay.otf');
}

生成的网址为http://localhost:3000/a3e85aa95ea26f41d5ba32abb0887b67.ttf。 404错误。但是添加dist，它会成功。 http://localhost:3000/dist/a3e85aa95ea26f41d5ba32abb0887b67.ttf成功。

你知道如何创建用于指向bult字体文件的URL ....

我的目录结构：

.
├── dist
│   ├── 582cac299faac1ab8d378a6488ba2ced.otf
│   ├── a3e85aa95ea26f41d5ba32abb0887b67.ttf
│   └── bundle.js
├── favicon
├── index.html
├── node_modules
├── ogimage.png
├── package.json
├── src
│   ├── actions
│   ├── assets
│   ├── components
│   ├── constants
│   ├── containers
│   ├── css
│   ├── fonts
│   ├── helpers
│   ├── models
│   └── reducers
└── webpack.config.js

我的webpack.config.js：

module.exports = {
  entry: `${__dirname}/src/Index.js`,
  output: {
    path: `${__dirname}/dist`,
    filename: 'bundle.js',
  },
  module: {
    loaders: [
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015'],
        },
      },
      { test: /\.css$/, loader: 'style-loader!css-loader' },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file' },
      { test: /\.(woff|woff2)$/, loader: 'url?prefix=font/&limit=5000' },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=application/octet-stream',
      },
      {
        test: /\.otf(\?v=\d+\.\d+\.\d+)?$/,
        loader: 'url?limit=10000&mimetype=application/octet-stream',
      },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml' },
    ],
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
  },
};