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

我目前正试图合并一个现有的项目到webpack 2.我目前正在努力的事情之一是文件加载器。通常你会希望它抓取来自<img>和background-image源的所有图像文件，然后将它们放在dist文件夹中。Webpack文件加载器只输出PNG文件

这是目前我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文件夹中有一个图像文件夹，它仅包含的PNG文件。由于某些原因，所有其他文件都被忽略。

我现在挣扎了好几天，我找不到合理的解释为什么会发生这种情况。

来源

2017-02-15 Martin van Houte

你是如何参考图像？ –

@BrandonPugh你是什么意思？我在我的html和背景图片中使用标记在我的（s）css文件中。 –

我认为问题是webpack只能通过@import和url()从JavaScript样式表中获取图像，当您需要像const src = require('./logo.jpg');这样的图像时，JavaScript才会从javascript中获取图像。所以它不会拿起刚刚在html文件中引用的任何图像，这些图像在您的案例中恰好是jpeg。您可能需要将copy-webpack-plugin复制到dist。

来源

2017-02-18 04:11:34

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

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

回答

相关问题