webpack - 如何让webpack在构建项目后退出

Question

我正在使用此 webpack 5.x 命令来构建 React 应用程序:

webpack --mode production --config config/webpack.dev.config.js

但是这次构建后进程没有退出，构建过程成功了，如何让进程退出？当我在 CI 中运行此命令时，我希望此命令结束，以便该过程可以进入下一步。这是 webpack 5.x 配置文件内容:

  const path = require('path');
  const webpack = require('webpack');
  const MiniCssExtractPlugin = require( 'mini-css-extract-plugin');

  module.exports = {
    entry : {
      'bundle' : './src/',
    } ,
    resolve: {
      extensions: ['.tsx', '.ts', '.js','.jsx'],
      alias: {
          '@': path.resolve(__dirname, '../src'),
      },
    },
    output : {
      path : path.resolve(__dirname, '../bundle') ,
      filename : '[name].js'
    },
    module : {
      rules : [
        {
          test: /\.ts$/,
          loader: 'ts-loader',
          options: {
            appendTsSuffixTo: [/\.vue$/]
          },
          include: [
            path.resolve(__dirname, '../../../node_modules/js-wheel'),
            path.resolve(__dirname, '../../../src')
          ],
          exclude: /node_modules|\.d\.ts$/
        },
        {
          test: /\.d\.ts$/,
          loader: 'ignore-loader'
        },
        {
          test: /\.jsx?$/,
          loader: 'babel-loader'
        },
        {
          test: /\.css$/i,
          use: [MiniCssExtractPlugin.loader, "css-loader"],
        },
        {
          test : /\.(scss)$/ ,
          use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
        },
        // https://stackoverflow.com/questions/69427025/programmatic-webpack-jest-esm-cant-resolve-module-without-js-file-exten
        {
          test: /\.m?js/,
          type: "javascript/auto",
        },
        {
          test: /\.m?js/,
          resolve: {
            fullySpecified: false,
          },
        },
        {
          test: /\.(jpe?g|png|gif|svg)$/i, 
          loader: 'file-loader',
          options: {
            name: '/public/icons/[name].[ext]'
          }
      }
      ]
    },
    plugins : [
      new MiniCssExtractPlugin({
        filename: "[name].css",
        chunkFilename: "[id].css",
      }),
      new webpack.DefinePlugin({
        __VUE_OPTIONS_API__: false,
        __VUE_PROD_DEVTOOLS__: false,
      }),
    ]
  };

如何调整代码，我已经看过官方的document ，而官方在构建项目时只有一个webpack命令。

Answer 1

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

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);
      });
    });
  },
},