Webpack 文件加载器只输出 PNG 文件

Question

我目前正在尝试将现有项目合并到 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 文件。由于某些原因，所有其他文件都被忽略了。

几天来我一直在努力解决这个问题，我找不到合理的解释为什么会发生这种情况。

Answer 1

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

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

Webpack 文件加载器只输出 PNG 文件

Webpack file-loader ONLY outputs PNG files

webpack

webpack-2

webpack-file-loader