为什么Webpack 2仅输出我的图像之一？

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.

Answer 1

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.