Skip to content

TheLarkInn/compare-webpack-target-bundles

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

12 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

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;

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published