1

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

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

4

1 回答 1

3

我认为问题在于，@import当url()您需要像const src = require('./logo.jpg');. 因此，它不会拾取刚刚在 html 文件中引用的任何图像，在您的情况下，这些图像恰好是 jpegs。

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

于 2017-02-18T04:11:34.550 回答