javascript - 我应该在文件加载器中指定什么选项，以便开发服务器正确加载文件

Question

当我运行“webpack -p”时，我的 dist 文件夹被创建，并且使用文件加载器加载的图像正确加载到页面中。当我运行 webpack-dev-server 时，图像是唯一无法正确加载的东西。我不知道我做错了什么。

这是我的配置文件:

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.tsx',
  devtool: 'inline-source-map',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test: /\.scss$/,
        use: [
          { loader: "style-loader" },
          { loader: "css-loader" },
          { loader: "sass-loader" }
        ],
      },
      {
          test: /\.html$/,
          use: ['html-loader']
      },
      {
          test: /\.(pdf|jpg|png|gif|svg|ico)$/,
          use: [
              { 
                loader: 'file-loader',
                options: {
                    name: '[name].[ext]',
                    outputPath: '/img/', //Just to place it in a folder
                    publicPath: '/img/'
                }
            }
          ]
      }
    ]
  },
  mode: 'development',
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
  plugins: [
    new HtmlWebpackPlugin({
        template: 'src/index.html'
    })
  ],
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist/'),
  }
};

我的文件夹结构如下所示:(不知道如何制作更直观的结构)

|-node_modules
|-src
   |- components
   |- img
       |- image.png
   |- styles
   index.html
   index.tsx
package.json
tsconfig.json
webpack.config.json

任何想法将不胜感激。我对 web-pack 还是个新手。

Answer 1

file-loader 的 outputPath 应该是相对的:

{ 
  loader: 'file-loader',
  options: {
    name: '[name].[ext]',
    outputPath: 'img/', // file pack output path, is relative path for `dist`
    publicPath: '/img/', // css file will use, is absolute path for server
}