Webpack file-loader not exporting images

Question

I am using webpack for my PHP and React project. I want to load a background image from my .scss file with the webpack file-loader but for some reason I don't know, the img-folder does not get copied/exported to my dist-folder. Below is the webpack.config.js:

var webpack = require("webpack");
var path = require("path");
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var WatchLiveReloadPlugin = require('webpack-watch-livereload-plugin');

var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");

var extractPlugin = new ExtractTextPlugin({
   filename: 'main.css'
});

module.exports = {
   entry: ['babel-polyfill', SRC_DIR + "/app/index.js"],
   output: {
      path: DIST_DIR + "/app",
      filename: "bundle.js",
      publicPath: "/dist"
   },
   watch: true,
   module: {

       rules: [
          {
            test: /\.js$/,
            include: SRC_DIR,
            loader: "babel-loader",
            exclude: /node_modules/,
            query: {
                presets: ["react", "es2015", "stage-2"], plugins: ["transform-decorators-legacy", "transform-class-properties"]
            }
        },
        {
            test: /\.scss$/,
            use: extractPlugin.extract({
                fallback: "style-loader",
                use:  ["css-loader", "sass-loader", "resolve-url-loader"]
              })                
        },
        {
            test: /\.css$/,
            use:  ["css-loader", "sass-loader", "resolve-url-loader"]
        },
        {
            test: /\.(jpg|png)$/,
            use: [
                {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'img/',
                        publicPath: 'img/'
                    }
                }
            ]
        }                      
      ]        
},
plugins: [
    extractPlugin,
    new WatchLiveReloadPlugin({
        port: 'localhost',
        files: [
            './dist/app/*.css',
            './dist/**/*.js',
            './src/app/**/*.png',
            './src/app/**/*.jpg',
            './src/app/**/.*.scss',
            './src/**/*.php',
            './src//*.js'
        ]
    })    
  ]
};

I also tried loader: 'file-loader?name=/dist/img/[name].[ext]', but with no luck.

My file structure is like this:

-- dist
   -- app
        bundle.js
        main.css
-- src
   -- app
     -- css
        main.scss
     -- img
        someimage.jpg

Then in my .scss i tried this:

background-image: url('/img/someimage.jpg');

Does anyone have an idea what's wrong here?

score 1 · Answer 1 · answered Sep 20 '17 at 12:13

1

Try to import the image file in one of your script files like

import '/path/to/img.jpg';

this will let Webpack know about the dependency and copy it.

answered Sep 20 '17 at 12:13

Jannik Lehmann

468
5
25

OK this works so far but what if there are multiple images in that folder? I dont want to import each single image file – ST80 Sep 20 '17 at 12:48
https://stackoverflow.com/questions/37313954/how-to-url-loader-multiple-images-in-webpack have not tried it, but it looks promising. – Jannik Lehmann Sep 20 '17 at 13:01
Oh man seriously? Why is webpack making things so complicated?!? Anyways, thanks for the suggestion :-) – ST80 Sep 20 '17 at 13:26

score 1 · Answer 2 · answered Sep 20 '17 at 12:33

1

The CSS/Sass loaders do not translate URLs that start with a /, therefore your file-loader won't be applied here.

The solution is to use relative paths for the imports if you want them to be processed by webpack. Note that CSS and Sass have no special syntax for relative imports, so the following are equivalent:

url('img/someimage.jpg')
url('./img/someimage.jpg')

If you want them to be resolved just like a module, webpack offers the possibility to start the import path with a ~, as shown in sass-loader - imports.

answered Sep 20 '17 at 12:33

Michael Jungo

31,583
3
91
84

When I do `url('./img/someimage.jpg')` I get `Module not found: Error: Can't resolve './img/someimage.jpg'` :-/ – ST80 Sep 20 '17 at 12:47
The path must be correct, like with any other JavaScript import. I didn't see that your CSS was in another directory. So it should be: `url('../img/someimage.jpg')`. – Michael Jungo Sep 20 '17 at 12:50

Webpack file-loader not exporting images

2 Answers2