webpack: webpack hangs in middle when '--p' is used always on 68%

I am using vuejs Loader. When I run the command “production” === “webpack --p --progress”. It always get struck at 68% and keeping stucking there forever. Can anyone suggest why is this happening and how can I resolve this.

capture

this is my web.config.js

var webpack = require('webpack');
var StatsWriterPlugin = require("webpack-stats-plugin").StatsWriterPlugin;
var OfflinePlugin = require('offline-plugin');


module.exports = {
  entry: {
    build: './src/index.js',
    restJS: './src/restJS.js'
  },
  output: {
    path: './dist',
    publicPath: 'dist/',
    filename: '[name].js'
  },
  module: {
    loaders: [{
      test: /\.vue$/,
      loader: 'vue'
    }, {
      test: /\.js$/,
      loader: 'babel',
      exclude: /node_modules/,
      query: {
        presets: ['es2015'],
        plugins: ['transform-runtime']
      }
    }, {
      // edit this for additional asset file types
      test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff(\d*)\??(\d*)$|\.ttf\??(\d*)$|\.wav$|\.mp3$|\.eot\??(\d*)$|\.svg\??(\d*)$|\.html$/,
      loader: "file-loader"
    }, {
      test: /\.scss$/,
      loader: "style!css!sass"
    }, {
      test: /\.css$/,
      loaders: ["style", "css"]
    }]
  }

};

this is my package.json

{
  "name": "",
  "version": "",
  "description": "",
  "author": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --progress --colors --watch",
    "watch" : "webpack --progress --colors",
    "dev": "webpack-dev-server --watch --inline --hot",
    "build": "webpack --progress --colors --watch --optimize-dedupe --optimize-max-chunks 15 --optimize-min-chunk-size 10000",
    "analysis":"webpack  --json | analyze-bundle-size",
    "production": "webpack --p --progress"
  },
  "dependencies": {
    "babel-plugin-transform-runtime": "^6.1.18",
    "css-loader": "^0.23.0",
    "file-loader": "^0.8.5",
    "google-maps": "^3.1.0",
    "hammerjs": "^2.0.4",
    "install": "^0.3.0",
    "jade": "^1.11.0",
    "jquery": "^2.1.4",
    "materialize-css": "^0.97.3",
    "node-sass": "^3.4.2",
    "npm": "^3.5.0",
    "opentok": "^2.3.0",
    "sass-loader": "^3.1.2",
    "style-loader": "^0.13.0",
    "template-html-loader": "0.0.3",
    "testimonial": "^2.0.1",
    "url-loader": "^0.5.7",
    "vide": "^0.4.1",
    "vue": "^1.0.10",
    "vue-async-data": "^1.0.2",
    "vue-hot-reload-api": "^1.2.1",
    "vue-html-loader": "^1.0.0",
    "vue-loader": "^7.1.4",
    "vue-resource": "^0.1.17",
    "vue-router": "^0.7.7",
    "vue-validator": "^1.4.4",
    "webfont-medical-icons": "^0.9.3",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.0"
  },
  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-runtime": "^6.2.0"
  }
}

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 6
  • Comments: 67 (16 by maintainers)

Commits related to this issue

Most upvoted comments

Same problem here, hangs on 91% additional asset processing

Hello, I have the same issue with webpack 2.2.0-rc.3 and webpack.2.1.0-beta.28 It’s blocking at 91%. No minification, no sourcemaps. I’m using extract plugin (2.0) and awesome typescript loader.

I have similar issue , hangs on 91% additional asset processing too long. My solution is use ‘webpack-parallel-uglify-plugin’ to replace UglifyJS plugin; hopes help

var ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
new ParallelUglifyPlugin({
   cacheDir: '.cache/',
   uglifyJS:{
     output: {
       comments: false
     },
     compress: {
       warnings: false
     }
   }
 })

For me, it reduce building time from 400s to 40s

I’m getting stuck at 70% with webpack 4.0.1:

❯ webpack --progress
 70% building modules 1682/1682 modules 0 active  

The weird thing for me is that, with the exact same versions of node, npm, yarn, and all of the packages, I can run this on my Macbook Pro (macOS 10.12.3 with 16 GB RAM and SSD) and it will finish in about 50 seconds. On my Ubuntu 16.04 servers (8GB RAM AWS with SSD), it takes 15 minutes (hanging at 68% for a long time but it does eventually finish). So I have to perform the build step on my mac and then rsync the files to the servers.

Has anyone else experienced this where it will work on a Mac in a reasonable amount of time but it’s dog slow on a Linux server with the same build tools?

Facing same issue, but I noticed one thing that it’s not happening for devtool: 'eval', but is happening for both: devtool: 'source-map' and devtool: 'cheap-module-source-map'

Webpack 1.12.14

@urbanhusky icreasing the max memory does indeed fixed the hangs on 68-69%. thanks for that!

Having the same problem. Gets stuck at 91% additional asset processing 😦

I found a workaround for us

We replaced all webpack calls from our build scripts with node --max-old-space-size=6144 node_modules/webpack/bin/webpack.js. In this case, we increased the node memory limit to 6GB (default seemed to be 1.5GB). Our build was hitting ~3GB, I went with 6GB as a limit to leave some headroom.

Comparison of old vs “fixed” solution

  • from build script (in this case: patched into dotnet publish with an <Exec Command="…"> - because we build an asp.net core application)
  • from package.json

new “fixed” workaround

# build script
node --max-old-space-size=6144 node_modules/webpack/bin/webpack.js --config config/webpack.config.vendor.js --env.prod -p

# package.json scripts:
"build-webpack-prod-vendor": "node --max-old-space-size=6144 node_modules/webpack/bin/webpack.js --config ./config/webpack.config.vendor.js --env.prod -p",

previous implementation

# build script
node_modules/webpack/bin/webpack.js --config config/webpack.config.vendor.js --env.prod -p

# package.json scripts:
"build-webpack-prod-vendor": "npm-run webpack --config ./config/webpack.config.vendor.js --env.prod -p",

Summary

Replaced npm-run webpack … with node --max-old-space-size=6144 node_modules/webpack/bin/webpack.js … Replaced node_modules/webpack/bin/webpack.js … with node --max-old-space-size=6144 node_modules/webpack/bin/webpack.js …

Adjust --max-old-space-size=<maximum memory in MB> accordingly.

I also have this problem I hit the 91% additional asset processing and then it stalls for ~10-15min I cut it down setting the devtool to eval just to test it and then the build time was 81s instead of 10min but there must be a way to skip the asset processing ?

Face the same issue, hangs on 91% additional asset processing.

The issue will not happen if I do one of the following things:

  1. Set devtool to some value that contains eval (eval, eval-source-map , cheap-eval-source-map, etc.)

  2. Remove the UglifyJsPlugin.

webpack version: 2.3.3

@henrahmagix Here you go https://github.com/webpack-contrib/sass-loader/issues/100 But this thread is pretty old however it helped my scenario. Initially I tried to delete portions of my webpack config to see what is causing the hang and narrowed down to the sass-loader.

Then I started searching for sass-loader hang and came across the thread. Hope it helps!

Below snippet was causing the hang:

 {
                test: /\.scss$/,
                loaders: ['raw-loader', 'sass-loader']
             },
             {
                test: /initial\.scss$/,
                loader: ExtractTextPlugin.extract({
                    fallbackLoader: 'style-loader',
                    loader: 'css-loader!sass-loader?sourceMap'
                })
             },

@subhash-periasamy Could you please link to the thread? Also it’d be great to find the code that uses this env variable for further investigation.

I saw other issues relating to sass compilation on Github. Sadly, I’m not compiling any SASS! It seems that since the webpack 2 upgrade, the npm compilation sporadically takes 5+ mins 😦.

Strangely it normally seems to be when it starts compiling lodash files.

Here is my config:

// load required modules
var path = require('path');
var webpack = require('webpack');
var autoprefixer = require('autoprefixer');

// load plugins
var CopyWebpackPlugin = require('copy-webpack-plugin');
var AssetsPlugin = require('assets-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var NgAnnotatePlugin = require('ng-annotate-webpack-plugin');

module.exports = function(options) {
   return {
        entry: {
            home: '/some/path/home.ts', // there're more entries
            vendor: '/some/path/vendor.ts')
        },
        output: {
            path: '/some/path/dist',
            filename: '[name].js',
            chunkFilename: '[id].chunk.js',
            publicPath: '/dist/',
            jsonpFunction: 'jsp'
        },
        resolve: {
            extensions: ['.ts', '.js'],
            modules: ['/some/path', 'node_modules'],
            unsafeCache: true
        },
        resolveLoader: {
            moduleExtensions: ['-loader']
        },
        module: {
            loaders: [
                {
                    test: /\.ts$/,
                    loader: 'awesome-typescript',
                    exclude: [/node_modules/]
                },
                {
                    test: /\.html/,
                    loader: 'html',
                    exclude: [/node_modules/]
                },
                {
                    test: /\.css$/,
                    loader: ExtractTextPlugin.extract({fallbackLoader: 'style', loader: options.prod ? 'css!postcss' : 'css'})
                },
                {
                    test: /\.scss/,
                    loader: ExtractTextPlugin.extract({fallbackLoader: 'style', loader: options.prod ? 'css!postcss!sass' : 'css!sass'})
                }
            ],
            noParse: [
                /angular.*\.js$/,
                /moment.*\.js$/,
                /ui-select.*\.js$/,
                /pdfjs-dist.*\.js$/,
                /ngmap.*\.js$/,
                /ng-file-upload.*\.js$/
            ]
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({names: ['vendor']}),
            new ExtractTextPlugin(options.prod ? '[name]-[chunkhash].css' : '[name].css'),
            new webpack.DefinePlugin({PRODUCTION: !!options.prod}),
            new AssetsPlugin({filename: 'manifest.json', path: absPath('data/webpack')}),
            new webpack.LoaderOptionsPlugin({
               minimize: options.prod,
               debug: false,
               options: {
                  htmlLoader: {
                     ignoreCustomFragments: [/\{\{.*?}}/],
                     attrs: false
                  },
                  postcss: function () {
                     return options.prod ? [autoprefixer] : [];
                 }
              }
            }),
            new NgAnnotatePlugin({add: true})
        ],
        node: {
            global: false,
            crypto: false,
            module: false,
            clearImmediate: false,
            setImmediate: false
        },
        devtool: false,
        profile: true,
        performance: {
            hints: false
        },
        stats: 'verbose',
        watchOptions: {
            ignored: [
                './node_modules/**/*',
                './module/**/*',
                './public/**/*',
                './vendor/**/*'
            ]
        }
    };
};

It takes ~25s (I optimized from 35 to 25s with noParse option) But the 91% additional asset processing is taking a very long time, and I can’t figure what is done in this step. there’s no uglify plugin or whatever. Note that I’m building 600+ modules