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的{{1}}应该是相对的：

outputPath

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

1 个答案: