Почему Webpack 2 выводит только одно из моих изображений? - PullRequest
Новая
       11

Почему Webpack 2 выводит только одно из моих изображений?

0 голосов
/ 26 апреля 2018

Я все еще довольно новичок в Webpack 2, но у меня до сих пор работает большинство моих конфигураций. Единственное, что мне трудно понять, это то, что когда я запускаю «npm run build», чтобы объединить мои файлы в папку «dist», я заметил, что только 1 из моих изображений объединяется. Я использую «загрузчик файлов». К вашему сведению, все мои изображения все еще отображаются на моем dev-сервере, когда я его запускаю, и отображаются под общими путями, которые я назначил. Это только мой локальный вывод, который не отображает все изображения. Кто-нибудь знает, что происходит?

Структура моей папки

enter image description here

webpack.config.js 

module.exports = {
    mode: "development",
    entry: {
        app: "app"
    },
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "[name].bundle.js",
        publicPath: "/"
    },
    devServer: {
        publicPath: '/',
        port: 3000
    },
    module: {
        rules: [
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]',
                            outputPath: 'images/',
                            publicPath: 'images/'
                        }
                    }
                ]
            }
        ]
    }
}

Как вы можете видеть в моей структуре папок, она всегда создается с выводом только одного из моих изображений. Это не главная проблема (я не думаю), так как все изображения все еще работают, когда я запускаю приложение, но я был бы признателен, если бы кто-нибудь мог помочь мне понять, почему только одно изображение выводится на мой локальный «dist». Спасибо.

1 Ответ

0 голосов
/ 27 апреля 2018

Webpack записывает на диск только те изображения, которые вам нужны. Это одно из преимуществ Webpack, оно включает в себя только те ресурсы, которые необходимы вашему приложению, поэтому Webpack гарантирует, что эти образы существуют при развертывании.

Чтобы добавить больше изображений в ваш вывод, требуйте их либо из вашего Javascript или CSS с url() s

Обратите внимание, что если вы используете сервер разработки, Webpack ничего не записывает на диск и сохраняет все скомпилированные ресурсы в памяти.

...