如何让webpack在生成项目后退出

ax6ht2ek  于 2022-11-13  发布在  Webpack
关注(0)|答案(2)|浏览(258)

我正在使用这个webpack 5.x命令来构建一个react应用程序:

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

但进程在此构建后未退出,则构建进程已成功,如何使进程退出?当我在配置项中运行此命令时,我希望此命令结束,以便过程可以进入下一步骤。以下是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命令。

dced5bon

dced5bon1#

在modules.export配置中添加设置为false的布尔属性watch,以防止它监视要更新的源文件中的更改。

module.exports = {
  //...
  watch: false,
};

Watch默认设置为true。文档

r6hnlfcb

r6hnlfcb2#

嗨,我一直在纠结这个问题,但我想通了:)
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);
      });
    });
  },
},

相关问题