Webpack 构建成功，但挂起而不退出

Question

这是我的webpack.config.js，我没有看到其中有任何奇怪的东西（即无限线程池）会造成挂起，但我总是必须手动按 Ctrl+C 该步骤才能继续。这是一个小麻烦，但我想在重构一些部署代码时解决它。

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/',
  },
};

这是我的package.json样子：

{
    "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"
    }
}

我通过 生成进程npm run build，该进程client.js已正确构建，但 webpack 构建过程永远不会终止。

Answer 1

我找到了我的问题。我在开发和生产中使用相同的 webpack 配置。在开发中，它被配置为监视文件更改并重新启动服务器。我没有意识到这也意味着它正在监视生产中的文件更改，准备重建捆绑包。更改线路watch: true以watch: process.env.NODE_ENV !== 'production' && true解决问题。

Answer 2

嗨，我一直在努力解决这个问题，但我想通了:)

Webpack5 将保持监视模式，我们需要一种方法来确定它何时完成。您可以在 webpack.config 文件中使用我的解决方案，输入到插件数组中。将退出手表模式并继续下一步:)希望这对您有用

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