Skip to content

Instantly share code, notes, and snippets.

@phatnguyenuit

phatnguyenuit/webpack.config.js

Created October 19, 2022 15:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save phatnguyenuit/b78331ae81892542ede8253f4964a039 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save phatnguyenuit/b78331ae81892542ede8253f4964a039 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. phatnguyenuit created this gist Oct 19, 2022.
    112 changes: 112 additions & 0 deletions webpack.config.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,112 @@
    const path = require('path');
    const webpack = require('webpack');

    /** @type {webpack.Configuration} */
    const developmentConfiguration = {
    mode: 'development',
    target: 'node',
    entry: path.resolve(__dirname, './index.js'),
    output: {
    path: path.resolve(__dirname, 'dist', 'development'),
    filename: '[name].bundle.js',
    // Clean the output directory before emit.
    clean: true,
    },
    };

    /** @type {webpack.Configuration} */
    const productionConfiguration = {
    mode: 'production',
    target: 'node',
    entry: path.resolve(__dirname, './index.js'),
    output: {
    path: path.resolve(__dirname, 'dist', 'production'),
    filename: '[name].[contenthash:8].js',
    // Clean the output directory before emit.
    clean: true,
    },
    };

    /**
    * Webpack configuration function
    * @param {any} env Webpack env
    * @param {any} argv Webpack argv
    * @returns {webpack.Configuration}
    */
    function configurationFunc(env, agrv) {
    console.log('[INFO] env', env);
    console.log('[INFO] agrv', agrv);

    /** @type {webpack.Configuration['mode']} */
    const mode = env.production ? 'production' : 'development';
    const outputFileName = env.production
    ? '[name].[contenthash:8].js'
    : '[name].bundle.js';

    return {
    mode,
    target: 'node',
    entry: path.resolve(__dirname, './index.js'),
    output: {
    path: path.resolve(__dirname, 'dist', mode),
    filename: outputFileName,
    // Clean the output directory before emit.
    clean: true,
    },
    };
    }

    /**
    * Load Asynchronous Configuration
    * @param {'production' | 'development'} env
    * @returns {Promise<webpack.Configuration>}
    */
    function loadAsyncConfiguration(env = 'development') {
    return new Promise((resolve) => {
    console.log(
    `Waiting 5 seconds to load webpack configuration for "${env}" environment...`
    );

    return setTimeout(() => {
    resolve(
    env === 'production'
    ? productionConfiguration
    : developmentConfiguration
    );
    }, 5000);
    });
    }

    // Export configuration object
    // module.exports = developmentConfiguration;
    // module.exports = productionConfiguration;

    // Export a function
    module.exports = configurationFunc;

    // Export a Promise
    // Only work with CLI
    // Not work with webpack in programmatically
    // module.exports = () => loadAsyncConfiguration('development');
    // module.exports = () => loadAsyncConfiguration('production');
    // module.exports = () =>
    // Promise.all([
    // loadAsyncConfiguration('development'),
    // loadAsyncConfiguration('production'),
    // ]);

    // Export multiple configurations
    // module.exports = [developmentConfiguration, productionConfiguration];
    //
    // Dependencies
    // module.exports = [
    // { ...developmentConfiguration, name: 'p1' },
    // { ...productionConfiguration, dependencies: ['p1'] },
    // ];

    //
    // Parallelism
    // In case we export multiple configurations, we can specify the maximum number of compilers
    // that will compile in parallel
    // module.exports = [developmentConfiguration, productionConfiguration];
    // module.exports.parallelism = 2;