webpack file-loader freezes

Question

I have a legacy project in which I introduced webpack/react some time ago.

folder structure:

-webroot
    -img
-web
    -project
       - webpack.config.js
       - package.json
    -src
       - client.js

Now I want to add image loading via the file loader.

webpack config:

const webpack = require('webpack');
const path = require('path');
const babelConfig = require('./babel.config');
const mainWebpackConfig = require('./webpack.main');

const webpackConfig = Object.assign(mainWebpackConfig, {
  mode: 'development',

  ...

  context: config.paths.project(),
  resolve: {
    modules: [config.paths.project('node_modules')],
    extensions: ['.json', '.js', '.jsx']
  },
  entry: {
    'main': [
      'babel-polyfill',
      config.paths.src('client.jsx')
    ]
  },
  output: {
    filename: '[name].js',
    chunkFilename: '[name].js',
    path: config.paths.dist('js/src/app/desktop'),
    publicPath: '/',
  },
  module: {
    rules: [{
      test: /\.(jpe?g|png|gif|svg)$/i,
      use: [{
        loader: 'file-loader',
        options: {
          name: '[name].[hash].[ext]',
          outputPath: config.paths.dist('img') // creates a path to webroot/img
        }
      }],
    }, 

    ...

source code:

import React from "react";

const img = require('./img.png');

const ImageComponent = () => (
  <img src={img}/>
);

export default ImageComponent;

After I start the webpack build, the build freezes during the emitting phase (95%). I'm running this on a windows machine. On a Mac, it works fine. Any help would be appreciated.

Thanks in advance!

Answer 1

I fixed it by setting the outputPath as a relative string (full paths do not work). I do use a full path as the output path for the webpack configuration.

solution:

     {
        loader: 'file-loader',
        options: {
          name: '[name].[hash].[ext]',
          publicPath: '/img/',
          outputPath: './../../../../img'
        }
      }