Why does Webpack 2 output only one of my images?

Question

I'm still fairly new to webpack 2 but I've got most of my configurations working so far. The only thing I'm having some difficulty understanding is that when I run "npm run build" to bundle my files into my "dist" folder I noticed that only 1 of my images are being bundled. I'm using 'file-loader'. FYI all my images still show on my dev-server when I run it and appear under the public paths I assigned. It's only my local output that's not displaying all the images. Anyone know what's going on?

My Folder Structure

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/'
                        }
                    }
                ]
            }
        ]
    }
}

As you can see in my folder structure, it always builds with only one of my images being outputted. It's not a major issue (I don't think) since all the images still work when I run the app, but I would appreciate it if anyone could help me understand why only one image is outputting to my local 'dist'. Thank you.

@AndyRay THANK YOU! I guess I wasn't understanding that part. I knew I didn't import or require this image in my app.js file specifically but after you said that, I remembered it was being used indirectly in my css. Got it now, thanks again! — hgo, Apr 26 '18 at 16:18
Not really relevant to your question, but are you aware that Webpack 4 is available? May I ask why you are using Webpack 2? — laptou, Apr 27 '18 at 15:40

score 0 · Accepted Answer · answered Apr 27 '18 at 15:38

Webpack only writes images to disk that you require. This is one of the benefits of Webpack, it only includes assets that your application needs, so Webpack will guarantee those images exist when you deploy.

To add more images to your output, require them either from your Javascript or CSS with url()s

Note that if you're using the dev server, Webpack doesn't write anything to disk, and keeps all compiled assets in memory.

Why does Webpack 2 output only one of my images?

1 Answers1