为什么 Webpack 2 只输出我的一张图片？

Question

我对 webpack 2 还是很陌生，但到目前为止我的大部分配置都可以正常工作。唯一让我难以理解的是，当我运行 "npm run build" 将我的文件捆绑到我的 "dist" 文件夹中时，我注意到我只有 1 张图像被捆绑。我正在使用 'file-loader'。仅供参考，当我运行它并出现在我分配的 public 路径下时，我的所有图像仍然显示在我的 dev-server 上。只有我的本地输出没有显示所有图像。有人知道怎么回事吗？

我的文件夹结构

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'。谢谢。

Answer 1

Webpack 仅将您需要的图像写入磁盘。这是 Webpack 的好处之一，它只包含您的应用程序需要的资产，因此 Webpack 将保证在您部署时存在这些图像。

要向您的输出添加更多图像，请使用 url()s

从您的 Javascript 或 CSS 中获取它们

请注意，如果您使用的是开发服务器，Webpack 不会将任何内容写入磁盘，并将所有已编译的资源保存在内存中。

为什么 Webpack 2 只输出我的一张图片？

Why does Webpack 2 output only one of my images?

javascript

webpack

webpack-file-loader