Реагировать на импорт изображений из общей папки

Question

Я пытаюсь получить статические изображения из моего публичного каталога, но не найден. Я не использую CRA, поэтому, может быть, мне не хватает какой-то конфигурации с Webpack. Использование модуля загрузчика файлов и импорт изображения работает в режиме разработки, но не подходит для моей спецификации производственного сервера

Структура моего проекта:

\public
   \static
      \images
         image.png
\src
   \component
      component.js
...
package.json
webpack.common.js
webpack.dev.js
webpack.prod.js

На component.js, Iхочу получить файл image.jpg в папке static / images следующим образом:

  <img src='/static/images/image.png'></img>

Но я получаю 404 не найденных.

Мой webpack.commom.js:

const CleanWebPackPlugin = require('clean-webpack-plugin')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const path = require('path')

module.exports = {
    entry: {
        main: './src/index.js'
    },
    output: {
        filename: '[name].[hash].js',
        path: path.resolve('./dist'),
        publicPath: "/"
    },
    module:{
        rules:[
            {
                test: /\.js$/,
                exclude: ['/node_modules'],
                use: [{ loader: 'babel-loader'}],
            },
            {
                test: /\.s?(a|c)ss$/,
                use: [{
                    loader: 'style-loader'
                }, {
                    loader: 'css-loader'
                },{
                    loader: 'sass-loader'
                }]
            },
            {
                test: /\.(png|jpe?g|gif)$/,
                use: [
                  {
                    loader: 'file-loader',
                    options: {},
                  },
                ],
              },

        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: 'index.html'
        }),
        new CleanWebPackPlugin(),
    ],
}

И версия для разработчиков:

module.exports = merge(common, {
    mode: 'development',
    devServer: {
        host: 'localhost',
        port: 3000,
        open: true,
        historyApiFallback: true,
        publicPath: "/",
    }
})

Заранее спасибо.

Answer 1

Вы используете file-loader в качестве плагина веб-пакета, который не работает как «просто зеркальное отображение структуры каталогов public в dist». Вы можете найти документацию для этого плагина здесь: https://webpack.js.org/loaders/file-loader/

По сути, плагин делает, если вы импортируете файл изображения (фактически, импортируете его программно, а не просто используя строковую ссылку на его путь),файл копируется в ваш каталог dist, возможно, переименовывается, а затем в ваш скомпилированный исходный код вставляется правильное имя файла.

Таким образом, в вашем случае, если вы хотите решить свою проблему с помощью file-loader, вы должны сослаться на файл изображения как

// Relative path to image file from js file
import imageFile from './assets/image.png';

// ...
const component = props => <img src={imageFile}></img>;

Если вы хотите использовать подход на самом деле просто зеркалированияpublic -директория к каталогу dist, для этого вам нужно использовать дополнительный плагин webpack (например, https://stackoverflow.com/a/33374807/2692307)

Кстати, я предполагаю, что он работает в режиме dev, потому что вы устанавливаете '/ 'как открытый путь, поэтому сервер разработки просто обслуживает все в корневом каталоге. Это нечто иное, чем копирование файлов в dist, как вы пытаетесь достичь.

Answer 2

Не уверен, если это поможет, но я попробую

Попробуйте добавить публичный путь к вашей папке dist и что-то вроде этого

output: {
        path: path.resolve(__dirname, "/dist"),
        filename: "[name].js",
        publicPath: "/dist/"
    },