nishantatgit / compare-webpack-target-bundles

Example of all the webpack targets!!! Webpack Playground!

compare-webpack-target-bundles

Example of webpack targets bundled into separate bundles.

Overview

This repo is a super small playground for testing and learning how webpack output "templates" (shape of the bundle), vary between build targets. Feel free to use this as you will. Can also serve a purpose for bug reporting.

Usage

Clone the repo locally, cd into repo and run the following:

$ npm install

$ npm start

Resulting bundles can be seen in the dist folder

Dist Table of Contents

• web <== DEFAULT

• async-node

• electron-main

• node-webkit

• node

• webworker

tl;dr (Show me the config from right here):

var path = require('path');
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');

var baseConfig = {  
  target: 'async-node',
  entry: {
    entry: './entry.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, './dist')
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'inline',
      filename: 'inline.js',
      minChunks: Infinity
    }),
    new webpack.optimize.AggressiveSplittingPlugin({
        minSize: 5000,
        maxSize: 10000
    }),
  ]
};

let targets = ['web', 'webworker', 'node', 'async-node', 'node-webkit', 'electron-main'].map((target) => {
  let base = webpackMerge(baseConfig, {
    target: target,
    output: {
      path: path.resolve(__dirname, './dist/' + target),
      filename: '[name].' + target + '.js'
    }
  });
  return base;
});

module.exports = targets;