webpack hangs at on “95% emit” / “95% emitting”

Question

This is my production webpack config. The two quotes in the title refer to webpack2 and webpack respectively. Both hang for me with a similar error.

This is my command t

Answer 1

So I figured this out. It turns out I was including reserved characters in my output path. I've since opened an issue on github.

When using an invalid or reserved character in the output.path webpack will hang with no output. Running with the --progress flag will show that it's hanging on 95% emit(ting) (suffix depending on webpack version).

Answer 2

I use laravel-mix as a standalone. This is my my config:

let mix = require('laravel-mix');

mix.setPublicPath('./')
   .js('resources/js/app.js', 'js')
   .sass('resources/sass/app.scss', 'css');

This worked for me.

Answer 3

This will also happen if you use indexTransform property and the function is throwing an error. To handle this you can wrap your function in a try/catch;

module.exports = (targetOptions, indexHtml) => {
  try {
    ...
  } catch (error) {
    console.error(error)
    process.exit(1) // Kills webpack
  }
}

Answer 4

In my case I was trying to use Angular 4, Webpack 3, AOT and lazy loading.
Using @ngtools/webpack and AotPlugin made it freeze at 95%.

What fixed was:
1). Install node-sass with npm install node-sass --no-bin-links, because it was not installed automatically with sass-loader.
2). Adding these loaders for the SCSS/CSS files (even inside node modules):

        {
            test: /\.css$/,
            use: [
                'style-loader',
                'css-loader'
            ]
        },
        {
            test: /\.scss$/,
            use: [
                'raw-loader',
                'sass-loader'
            ]
        }

Answer 5

In my case (Windows environment and laravel-mix) there weren't any incorrect characters in the path, since even a dead simple configuration didn't work. It was just webpack (webpack@3.12.0) doing something stupid of his own and the problem has been solved using publicPath option like this:

mix.options({
    publicPath: ('./')
});

which according to the documentation:

allows you to specify the base path for all the assets within your application

Alternatively you can use:

mix.setPublicPath('./');