Webpack builds successfully, but hangs without exiting

Question

Here is my webpack.config.js, I don't see anything weird in it (i.e. infinite thread pool) that would create a hangup, yet I always have to manually Ctrl+C the step to continue. This was a minor nuisance, but I want to resolve it while refactoring some deploy code.

const path = require('path');
const version = require('./VERSION').version;
const SentryWebpackPlugin = require('@sentry/webpack-plugin');

module.exports = {
  mode: process.env.NODE_ENV,
  entry: './client/index.js',
  output: {
    filename: 'client.js',
    libraryTarget: 'var',
    library: 'ui',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/',
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-flow'],
          },
        },
      },
    ],
  },
  plugins: [
    new SentryWebpackPlugin({
      include: '.',
      ignoreFile: '.sentrycliignore',
      ignore: [
          'node_modules',
          'lib',
          'server',
          'flow-typed',
          'scripts',
          'webpack.config.js'
      ],
      configFile: 'sentry.properties',
      release: version
    })
  ],
  watch: true,
  watchOptions: {
    ignored: ['test', 'node_modules', 'scripts'],
  },
  devtool: 'inline-source-map',
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    publicPath: '/dist/',
  },
};

Here is what my package.json looks like:

{
    "name": "investomation-api",
    "version": "0.0.1",
    "description": "...",
    "private": true,
    "main": "server.js",
    "scripts": {
        "build": "NODE_ENV=production npm install && webpack --mode production",
        "start": "PORT=443 NODE_ENV=production pm2 start server/start.js",
        "restart": "pm2 restart 0",
        "start:dev": "PORT=3002 NODE_ENV=development nodemon server/dev-start.js",
        "flow": "flow",
        "server:upload": "cd scripts && ./upload"
    },
    "repository": {
        "type": "git",
        "url": "..."
    },
    "nodemonConfig": {
        "ignore": [
            "cypress/",
            "node_modules/",
            "scripts/",
            "tests/"
        ]
    },
    "prettier": {
        "tabWidth": 4
    },
    "author": "Alexander Tsepkov",
    "license": "SEE LICENSE IN LICENSE",
    "dependencies": {
        "@mapbox/geojson-types": "^1.0.2",
        "bcrypt": "^3.0.7",
        "body-parser": "^1.19.0",
        "connect-flash": "^0.1.1",
        "connect-sqlite3": "^0.9.11",
        "cookie-parser": "^1.4.4",
        "cors": "^2.8.5",
        "csv-parser": "^2.3.2",
        "d3": "^5.15.0",
        "dialog-polyfill": "^0.5.0",
        "dotenv": "^8.2.0",
        "ejs": "^2.7.4",
        "express-session": "^1.17.0",
        "https": "^1.0.0",
        "knex": "^0.21.1",
        "morgan": "^1.9.1",
        "multer": "^1.4.2",
        "node-fetch": "^2.6.0",
        "nodemailer": "^6.4.2",
        "objection": "^2.1.3",
        "passport": "^0.4.1",
        "passport-local": "^1.0.0",
        "sharp": "^0.25.4",
        "sqlite3": "^4.1.1",
        "stripe": "^7.15.0"
    },
    "devDependencies": {
        "@babel/core": "^7.8.3",
        "@babel/node": "^7.8.3",
        "@babel/preset-env": "^7.8.3",
        "@babel/preset-flow": "^7.8.3",
        "@babel/register": "^7.8.3",
        "@sentry/webpack-plugin": "^1.9.3",
        "babel-loader": "^8.0.6",
        "css.escape": "^1.5.1",
        "cypress": "^4.5.0",
        "flow-bin": "^0.107.0",
        "html-webpack-plugin": "^3.2.0",
        "jsdom": "^15.2.1",
        "mocha": "^6.2.2",
        "nodemon": "^1.19.4",
        "test-drone": "0.0.13",
        "webpack": "^4.41.5",
        "webpack-cli": "^3.3.10",
        "webpack-dev-server": "^3.10.1"
    }
}

I spawn the process via npm run build, the client.js is correctly built, but the webpack build process never terminates.

Javier Software · Accepted Answer · 2022-11-09 00:18:42Z

8

Hi I have been struggling with this, but I figured it out :)

Webpack5 will stay on watch mode and we need a way to determine when it is finished or not. You can use my solution here on your webpack.config file, input into the plugins array. Will exit the watch mode and will proceed to next step :) hope this works for you

    // Exit the process when built successfully
{
  apply: (compiler) => {
    compiler.hooks.done.tap("DonePlugin", (stats) => {
      console.log("Compile is done !");
      setTimeout(() => {
        process.exit(0);
      });
    });
  },
},

answered Nov 9, 2022 at 0:18

Javier Software

1211 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cory Over a year ago

You are my lord and savior.

Alexander Tsepkov · Accepted Answer · 2020-08-04 12:25:12Z

6

I figured out my problem. I use the same webpack config in dev and production. In dev, it's configured to watch for file changes and restart the server. I didn't realize that this also meant that it was watching for file changes in production ready to rebuild the bundle. Changing the line watch: true to watch: process.env.NODE_ENV !== 'production' && true fixed the issue.

answered Aug 4, 2020 at 12:25

Alexander Tsepkov

4,2065 gold badges39 silver badges65 bronze badges

Comments

Serdar D. · Accepted Answer · 2022-04-13 14:51:32Z

4

This can be because of the webpack-bundle-analyzer plugin. Disable or remove it for production builds.

answered Apr 13, 2022 at 14:51

Serdar D.

3,4411 gold badge36 silver badges26 bronze badges

Collectives™ on Stack Overflow

Webpack builds successfully, but hangs without exiting

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related