Skip to content
Example of all the webpack targets!!! Webpack Playground!
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore Initial Commit, bundles should also be included Aug 23, 2016 Update Aug 23, 2016
dep_two.js Initial Commit, bundles should also be included Aug 23, 2016
package.json Update package.json Jan 27, 2017
webpack.config.js Added AggressiveSplittingPlugin for HTTP2 and CommonsChunk Aug 23, 2016


Example of webpack targets bundled into separate bundles.


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.


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

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;
You can’t perform that action at this time.