Webpack file-loader: не удалось загрузить ресурс

Question

Используя веб-пакет, у меня есть базовая конфигурация:

{
  entry: {
    'example1': path.join(__dirname, '/demo/example1/app.ts'),
    'example2': path.join(__dirname, '/demo/example2/app.ts'),
  },
  output: {
    filename: '[name]/app.js',
    path: path.join(__dirname, '/demo'),
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        loader: 'source-map-loader'
      },
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          onlyCompileBundledFiles: true
        },
        exclude: /node_modules/,
      },
      {
        test: /\.s?[ac]ss$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'style-loader',
          },
          {
            loader: 'css-loader',
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'resolve-url-loader'
          },
          {
            loader: 'sass-loader',
          },
          {
            loader: 'sass-bulk-import-loader',
          },
        ],
      },
      // File loader
      {
        test: /\.(woff(2)?|ttf|eot|png|svg|md)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              limit: 8192,
              name: 'asset.[hash].[ext]',
            },
          }
        ]
      }
    ],
  },
  resolve: {
    modules: ['node_modules', path.resolve(process.cwd(), 'demo')],
    extensions: ['.ts', '.js'],
  },
  devtool: 'inline-source-map',
  devServer: {
    port: 3000,
    historyApiFallback: {
      index: 'demo/'
    },
    contentBase: [path.join(process.cwd(), 'demo')],
  },
};

Все работает нормально. Я могу наслаждаться своим кодом.

Однако ресурсы не загружаются с file-loader. Действительно, у меня есть эта ошибка:

Не удалось загрузить ресурс: сервер ответил с состоянием 404 (не найдено)

Это связано с путем, который являетсяфигово. Потому что в этой конфигурации он пытается получить актив по этому URL: http://localhost:3000/example2/asset.857adff9b6c.svg

И он работает по следующему пути: http://localhost:3000/asset.857adff9b6c.svg

Какя могу настроить webpack, чтобы он работал?

Answer 1

Это решит мою проблему! Просто установите publicPath.

  output: {
    filename: '[name]/app.js',
    path: path.join(__dirname, '/demo'),
    publicPath: '/'
  },