Skip to content

Instantly share code, notes, and snippets.

@AjayPoshak

AjayPoshak/webpack.client.config.js

Created July 14, 2018 14:38
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. AjayPoshak renamed this gist Jul 14, 2018. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → webpack.client.config.js
    View file
    File renamed without changes.
  2. AjayPoshak created this gist Jul 14, 2018.
    75 changes: 75 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,75 @@
    const path = require('path'),
    webpack = require('webpack'),
    AssetsPlugin = require('assets-webpack-plugin'),
    BrotliPlugin = require('brotli-webpack-plugin'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    UglifyJsPlugin = require('uglifyjs-webpack-plugin');

    const isProd = process.env.NODE_ENV === 'production';

    /**
    * Plugins for dev environment
    */
    const devPlugins = [
    new HtmlWebpackPlugin({
    template: './client/index.html',
    title: 'Bus Booking in Africa'
    }),
    new AssetsPlugin({
    prettyPrint: true,
    filename: 'assets.json',
    path: path.resolve(__dirname, 'build')
    }),
    new webpack.DefinePlugin({
    __ENV__: JSON.stringify(process.env.NODE_ENV || 'development')
    })
    ];
    /**
    * Plugins for production environment
    */
    const prodPlugins = [
    new BrotliPlugin({
    asset: '[path].br[query]',
    test: /\.(js|css|html|svg)$/,
    threshold: 10240,
    minRatio: 0.8
    }),
    new UglifyJsPlugin({
    cache: true,
    parallel: true,
    sourceMap: true
    })
    ];
    /**
    * Merging plugins on the basis of env
    */
    const pluginList = isProd ? [...devPlugins, ...prodPlugins] : devPlugins;

    module.exports = {
    // May add cheap-module-source-map to devtool to generate source maps to prod builds
    devtool: isProd ? '' : 'inline-source-map',
    entry: './client/index.js',
    output: {
    filename: isProd ? '[name].[chunkhash].js' : '[name].bundle.js',
    path: path.resolve(__dirname, 'build/client'),
    publicPath: 'build/client/'
    },
    module: {
    rules: [{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }]
    },
    plugins: pluginList,
    optimization: {
    splitChunks: {
    cacheGroups: {
    commons: {
    test: /[\\/]node_modules[\\/]/,
    name: 'vendors',
    chunks: 'all'
    }
    }
    },
    runtimeChunk: {
    name: 'manifest'
    }
    }
    };