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（未找到）

这是由于路径不好。因为使用这种配置，它正尝试通过以下网址获取资产： 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: '/'
  },

Webpack文件加载器：无法加载资源

1 个答案: