Какую опцию я должен указать в file-loader для сервера dev для правильной загрузки файла - PullRequest
Новая
       22

Какую опцию я должен указать в file-loader для сервера dev для правильной загрузки файла

0 голосов
/ 22 января 2019

Когда я запускаю свой «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

Любые идеи будут с благодарностью. Я все еще новичок в веб-пакете.

1 Ответ

0 голосов
/ 23 января 2019

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
}
...