How to use webpack-merge - 10 common examples

const debug = (opts, label, ...additional) => {
  if (!opts.debug) return

  const prefix = `WebpackAdapter[${opts.ext}]`
  const [, timingLabel, timingEvent] = label.match(/(.*):(start|end)$/) || []
  if (timingLabel && timingEvent) {
    const action = timingEvent === 'start' ? 'time' : 'timeEnd'
    if (timingEvent === 'start') console.debug(yellow(`${prefix}.${timingLabel} -> start`), additional.join(['\n\n']))
    console[action](yellow(`${prefix}.${timingLabel} -> end`))
  } else {
    console.debug(cyan(`${prefix}.${label}`), additional.join(['\n\n']))
  }
}

const merge = webpackMerge.strategy({ entry: 'replace', output: 'replace' })

const buildConfig = options => {
  const { serverConfig, serverRenderPath, clientConfig, clientRenderPath } = options
  const config = {}

  // deliberately skip optimizations
  const mode = 'development'

  // build webpack config by overriding entry and output
  // and explicitely setting the target
  if (serverConfig && serverRenderPath) {
    config.server = merge(serverConfig, {
      mode,
      name: WEBPACK_NAME_SERVER,
      target: 'node',
      entry: {},

output: configCustom.getOutput(),
    module: configCustom.getModule(),
    resolve: configCustom.getResolve(),
    externals: configCustom.getExternals(),
    plugins: configCustom.getPlugins(),
};

var otherConfig = configCustom.getOtherOptions();

for (let key in otherConfig) {
    userConfig[key] = otherConfig[key];
}

baseConfig = configWebpackMerge.mergeProcess(baseConfig);

var webpackConfig = webpackMerge.smartStrategy(
    configWebpackMerge.smartStrategyOption
)(baseConfig, userConfig);

// console.log(JSON.stringify(webpackConfig, null, 4));

module.exports = webpackConfig;

resolve: configCustom.getResolve(),
    externals: configCustom.getExternals(),
    plugins: configCustom.getPlugins()
};

let otherConfig = configCustom.getOtherOptions();

for (let key in otherConfig) {
    if (otherConfig.hasOwnProperty(key)) {
        userConfig[key] = otherConfig[key];
    }
}

baseConfig = configWebpackMerge.mergeProcess(baseConfig);

let webpackConfig = webpackMerge.smartStrategy(
    configWebpackMerge.smartStrategyOption
)(baseConfig, userConfig);

// console.log(JSON.stringify(webpackConfig, null, 4));

module.exports = webpackConfig;

__once: JSON.stringify(data.once || {}),
        __version: JSON.stringify(data.version),
        // This is necessary to allow modules that use service workers to fetch their service
        // worker code
        __publicPath: JSON.stringify(publicPath),
      }),
      new extract$trs(data.locale_data_folder, data.name),
      // Add custom messages per bundle.
      new WebpackMessages({
        name: data.name,
        logger: str => logging.info(str),
      }),
    ],
  };

  bundle = merge.smart(bundle, base_bundle, local_config);

  return bundle;
};

'Access-Control-Allow-Headers': '*',
      },
    },
    module: {
      rules: [
        {
          parser: {
            system: false
          }
        }
      ]
    }
  }

  // @ts-ignore
  const mergedConfig: any = webpackMerge.smart(config, singleSpaConfig)

  removePluginByName(mergedConfig.plugins, 'IndexHtmlWebpackPlugin');
  removeMiniCssExtract(mergedConfig);

  if (Array.isArray(mergedConfig.entry.styles)) {
    // We want the global styles to be part of the "main" entry. The order of strings in this array
    // matters -- only the last item in the array will have its exports become the exports for the entire
    // webpack bundle
    mergedConfig.entry.main = [...mergedConfig.entry.styles, ...mergedConfig.entry.main];
  }

  // Remove bundles
  delete mergedConfig.entry.polyfills;
  delete mergedConfig.entry.styles;
  delete mergedConfig.optimization.runtimeChunk;
  delete mergedConfig.optimization.splitChunks;

/**
 * Webpack config for production electron main process
 */

import webpack from 'webpack';
import merge from 'webpack-merge';
import BabiliPlugin from 'babili-webpack-plugin';
import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
import baseConfig from './webpack.config.base';

export default merge.smart(baseConfig, {
  devtool: 'source-map',

  target: 'electron-main',

  entry: ['babel-polyfill', './app/main.dev'],

  // 'main.js' in root
  output: {
    path: __dirname,
    filename: './app/main.prod.js',
  },

  plugins: [
    /**
     * Babli is an ES6+ aware minifier based on the Babel toolchain (beta)
     */

/**
 * Webpack config for production electron main process
 */

import HappyPack from 'happypack';
import merge from 'webpack-merge';
import BabelMinifyPlugin from 'babel-minify-webpack-plugin';
import {BundleAnalyzerPlugin} from 'webpack-bundle-analyzer';
import baseConfig from './base';

import definePlugin from '../utils/definePlugin';
import rules from '../utils/rules';


export default merge.smart(baseConfig, {
    devtool: 'source-map',
    target: 'electron-main',
    entry: './src/electron/main',
    // 'main.js' in root
    output: {
        path: __dirname,
        filename: '../../build/electron/index.js',
    },
    module: {
        rules: rules('electron'),
    },
    plugins: [
        new HappyPack({
            id: 'babel',
            loaders: [{
                path: 'babel-loader', // Options to configure babel with

// force the cookie to be insecure since the proxy is over http
        proxyRes.headers['set-cookie'] = cookie[0].replace(new RegExp(/;\w?Secure/), '')
    }
};

var proxyConfig = function (target) {
    return {
        ws: true,
        target: target,
        secure: false,
        changeOrigin: true,
        onProxyRes: handleProxyRes
    }
};

module.exports = merge.smart(dev, {
    devServer: {
        progress: true,
        historyApiFallback: true,
        inline: true,
        hot: true,
        contentBase: [
            resolve('/src/main/webapp/')
        ],
        proxy: {
            '/search/catalog/**': proxyConfig('https://localhost:8993'),
            '/services/**': proxyConfig('https://localhost:8993'),
            '/styles/**': proxyConfig('https://localhost:8993/search/catalog'),
            '/cesium/**': proxyConfig('https://localhost:8993/search/catalog')
        }
    },
    module: {

import VueSSRPlugin from 'vue-ssr-webpack-plugin';

// when output cache is enabled generate cache version key
import config from 'config';
import fs from 'fs';
import path from 'path';
import uuid from 'uuid/v4';

if (config.server.useOutputCache) {
  fs.writeFileSync(
    path.join(__dirname, 'cache-version.json'),
    JSON.stringify(uuid())
  );
}

export default merge(base, {
  mode: 'development',
  target: 'node',
  entry: ['@babel/polyfill', './core/server-entry.ts'],
  output: {
    filename: 'server-bundle.js',
    libraryTarget: 'commonjs2'
  },
  resolve: {
    alias: {
      'create-api': './create-api-server.js'
    }
  },
  externals: Object.keys(require('../../package.json').dependencies),
  plugins: [
    new webpack.DefinePlugin({
      'process.env.VUE_ENV': '"server"'

import { resolve } from 'path';
import MinifyPlugin from 'babel-minify-webpack-plugin';
import CleanWebpackPlugin from 'clean-webpack-plugin';
import * as webpack from 'webpack';
import webpackMerge from 'webpack-merge';

import base from './main.base.config.babel';

export default webpackMerge(base, {
  bail: true,
  plugins: [
    new webpack.DefinePlugin({
      '__isDev__': JSON.stringify(false),
    }),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new CleanWebpackPlugin(['app/main.js'], { root: resolve(__dirname, '..') }),
    //new MinifyPlugin()
    // new webpack.optimize.UglifyJsPlugin()
  ],
});