Question

我对webpack 2还不太新，但到目前为止，我的大部分配置都工作了。我唯一有点难以理解的是，当我跑步＆＃34; npm run build＆＃34;将我的文件捆绑到我的＆＃34; dist＆＃34;文件夹我注意到我的图像中只有一个被捆绑在一起。我正在使用＆＃39; file-loader＆＃39;。仅当我运行它时，我的所有图像仍显示在我的开发服务器上，并显示在我指定的公共路径下。它只是我的本地输出没有显示所有图像。任何人都知道发生了什么？

我的文件夹结构

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

正如您在我的文件夹结构中所看到的那样，它始终只在输出我的一个图像的情况下构建。这不是一个主要问题（我不这么认为），因为当我运行应用程序时所有图像仍然有效，但如果有人能帮助我理解为什么只有一个图像输出到我的本地，我将不胜感激＆＃39; DIST＆＃39 ;.谢谢。

Answer 1

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

要在输出中添加更多图片，请使用Javascript或带url() s的CSS

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

为什么Webpack 2只输出我的一个图像？

1 个答案: