CODEWITHSUNDEEP
webpack
Dolphin
Dolphin

Reputation: 38885

how to let webpack exit after build the project

I am using this webpack 5.x command to build a react app:

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

but the process did not exit after this build, the build process was successfully, how to make the process exit? when I run this command in the CI, I want this command would end so that the procedure could go to next step. This is the webpack 5.x config file content:

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

how to tweak the code, I have already read the official document, and the official only have a webpack command when build the project.

Upvotes: 2

Views: 1700

Answers (2)

Javier Software
Javier Software

Reputation: 121

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

Upvotes: 4

Brian Griffin
Brian Griffin

Reputation: 21

Add the Boolean property watch set to false in the modules.export configuration to prevent it from watching your source files for changes to update.

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

Watch is set to true by default. Documentation

Upvotes: 2

Related Questions