Webpack 文件加载器仅输出 PNG 文件答案

【问题标题】：Webpack file-loader ONLY outputs PNG filesWebpack 文件加载器仅输出 PNG 文件
【发布时间】：2017-07-04 10:09:45
【问题描述】：

我目前正在尝试将现有项目合并到 webpack 2。我目前正在努力解决的问题之一是文件加载器。通常你会期望它从<img> 和background-image 源中获取所有图像文件，然后将它们放在你的 dist 文件夹中。

目前在我的 webpack.config.js 中

module.exports = {
context: path.resolve(__dirname, 'src'),
entry: {
    main: './main.js'
},
output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: "/dist",
    filename: '[name].js'
},
module: {
    rules: [
         //...
        {
           test: /\.(jpg|jpeg|png|svg)$/,
           use: [{
              loader: 'file-loader?name=[name].[ext]&outputPath=/images/'
            }]
        },
        //...
        ]
     }
};

运行 webpack 命令后，我的 dist 文件夹有一个 images 文件夹，它只包含 PNG 文件。由于某种原因，所有其他文件都被忽略了。

我已经为此苦苦挣扎了几天，但我找不到一个合乎逻辑的解释为什么会发生这种情况。

【问题讨论】：

你是如何引用图片的？
@BrandonPugh 你是什么意思？我在我的 html 中使用标签，在我的 (s)css 文件中使用背景图像。

标签： webpack webpack-2 webpack-file-loader

【解决方案1】：

我认为问题在于 webpack 只通过@import 和url() 从样式表中提取图像，并且当您需要像const src = require('./logo.jpg'); 这样的图像时在javascript 中。因此，它不会拾取刚刚在 html 文件中引用的任何图像，在您的情况下，这些图像恰好是 jpeg。

copy-webpack-plugin 可能是您将这些图像也复制到 dist 所需要的。

【讨论】：

谢谢，这正是我所需要的。