Webpack 文件加载器：加载资源失败

Question

使用 webpack，我有一个这样的基本配置：

{
  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: '/'
  },