1

I'm currently attempting to merge an existing project to webpack 2. One of the things I'm currently struggling with is the file-loader. Normally you'd expect that it grabs all image files from <img> and background-image sources, and then place them in your dist folder.

This is currently in my 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/'
            }]
        },
        //...
        ]
     }
};

After running the webpack command, My dist folder has an images folder, and it only contains the PNG files. All other files are being ignored for some reason.

I'm struggling with it a couple of days now, and I can't find a logical explanation why this happens.

Martin van Houte
  • 579
  • 6
  • 24

1 Answers1

3

I think the problem is that webpack only picks up images from stylesheets through @import and url() and in javascript when you require an image like const src = require('./logo.jpg');. So it wouldn't pick up any images that were just referenced in html files which in your case just happened to be the jpegs.

The copy-webpack-plugin might be what you need to have those images also copied to dist.

Brandon Pugh
  • 1,567
  • 1
  • 13
  • 18