• Stars
    star
    140
  • Rank 261,473 (Top 6 %)
  • Language
    JavaScript
  • Created over 8 years ago
  • Updated about 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

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;

More Repositories

1

webpack-workshop-2018

Learning resources for the webpack academy workshop series for 2018
554
star
2

artsy-webpack-tour

Annotations on webpack source code in a pseudo-guided fashion.
524
star
3

webpack-developer-kit

webpack dev kit for writing custom plugins and loaders on the fly. Education/Exploration tool as well.
JavaScript
224
star
4

unity-component-specification

This is a WIP draft of the Unity (Single File Web Component) Specification
217
star
5

angular2-template-loader

Chain-to loader for webpack that inlines all html and style's in angular2 components.
JavaScript
206
star
6

bundle-buddy-webpack-plugin

🐐🐐🐐🐐 bundle-buddy-webpack-plugin 🐐🐐🐐🐐
JavaScript
195
star
7

everything-is-a-plugin

Everything is a Plugin: Mastering webpack from the inside out. NgConf 2017
JavaScript
144
star
8

angular-starter-es6-webpack

This is an Angular Starter App with component and service generators using gulp for easy component development. Uses Karma-Mocha-Chai as testing suite and Babel Loader and Webpack for ES6
JavaScript
106
star
9

LazyParseWebpackPlugin

(v8-lazy-parse-webpack-plugin) This is a webpack plugin designed to exploit the V8 engines treatment of functions with parens wrapped around them. This lazy loads the parsing decreasing initial load time.
JavaScript
104
star
10

bundler-performance-benchmark

This is a super tiny example of a transparent comparison between parcel and webpack and anyone else who wants to be involved.
JavaScript
61
star
11

angular2-webpack-lite

Super lite boilerplate of Angular2 with Webpack and Typescript.
TypeScript
43
star
12

js-parser-discussions

Discussions & Collaboration on a Unified/Base set of parser features for JavaScript
42
star
13

virtual-dependency-loader

webpack loader that takes a single file, and declare pieces of that file as "dependencies" as if it existed.
JavaScript
33
star
14

code-splitting-examples

VueJs and webpack Code Splitting Examples
JavaScript
28
star
15

vscode-webpack-extension

VSCode Extention Demo for webpack
JavaScript
23
star
16

simple-webpack-wasm-example

Very alpha alpha example of webpack WASM support (just build output) for JS Engine Teams to look at
JavaScript
20
star
17

vue-d3

A fun experimental learning project where I learn how to use d3 while leveraging the power of VueJS
JavaScript
18
star
18

webpack-academy-starting-out-right

This is the starter github repo from https://webpack.academy/p/web-fundamentals
JavaScript
16
star
19

ngc-loader

Webpack support for the Angular2 offline compiler.
TypeScript
13
star
20

example-webpack-loader

A extremely barebones webpack loader example that conforms to our webpack-defaults repo standards
JavaScript
12
star
21

is-wsl

Check if the process is running inside Windows Subsystem for Linux (Bash on Windows)
Rust
10
star
22

prepack-webpack-plugin

Using prepack on your webpack bundles?
9
star
23

npm-package

A lightweight client for fetching package metadata from the npm registry
Rust
9
star
24

require-id-webpack-plugin

A webpack plugin that decorates `require` to a return module id's.
JavaScript
8
star
25

angular2-multievent-bindings-plugin

A small plugin that allows for binding multiple events into an Angular2 template.
TypeScript
7
star
26

example-vscode-bundled-extension

This is a super small and primitive example of a vscode extension being bundled with webpack for faster load and install times.
JavaScript
7
star
27

mersenne-twister-es

A JavaScript Implementation of MersenneTwiseter writting with ES Modules
JavaScript
7
star
28

AnalyticsWebpackPlugin

Plugin using GA to Report Webpack Statistics
JavaScript
5
star
29

webpack-v4-example

Test project that has webpack v4 linked against it. For personal use.
JavaScript
5
star
30

is-docker

Checks if the process is running inside a Docker container. Rust implementation of `sindresorhus/is-docker`
Rust
4
star
31

threeve

Texas with a dollar sign. Component library for VueJs and ThreeJs [WIP DONT USE]
JavaScript
4
star
32

is-interactive

Rust adaptation of sindresorhus/is-interactive from NodeJS
Rust
4
star
33

puppeteer-webpack-plugin

webpack Plugin for running scripts and tests using the Puppeteer Chrome Remote Protocol API
4
star
34

ansi-regex

A rust implementation of @microsoft/node-core-library's ansi regex detection
Rust
3
star
35

is-unicode-supported

Detect whether the terminal supports unicode or not.
Rust
3
star
36

sonar-webpack-plugin

😊😘😍
3
star
37

strip-ansi

Rust inspired implementation of chalk/strip-ansi.
Rust
3
star
38

has-flag

A rust implementation of sindresorhus/has-flag
Rust
2
star
39

experiment-0001

Experiment Number 0001
2
star
40

krate

Get a Rust crates metadata and release information.
Rust
2
star
41

bcmarinacci.theme-material-operator-1.3.0

2
star
42

webpack-stress-test

Stupid simple example repo that helps highlight some build time lengthiness (lots of modules)
JavaScript
2
star
43

webpack-context-modules

Tiny example of using webpack context modules
2
star
44

moo-angular-accordion

AngularJS Directive Component of the UI-Toolkit's Accordion for Mutual of Omaha's DXD Team
JavaScript
1
star
45

ngconf-webpack-wall-of-awesome

This is the code for the Webpack wall of awesomeness!!!
JavaScript
1
star
46

proposal-dot-last

`.last()` proposal for JavaScript
1
star
47

angular-compiler-plugin

Angular Webpack Compiler Plugin for Angular Offline compiler and code generation.
TypeScript
1
star
48

repro-parcel-112

This is a simple repro repo for ParcelJS Issue 112
HTML
1
star
49

sonar-loader

🙌🤣😁💕❤😂🎶🤞✌😎💖🌹💋 Loader for webpack! Get Hyped.
1
star
50

iPortfolio

An iOS App about my engineering background
Objective-C
1
star
51

angular-webpack-slides-ngconf-2016

Slides for Angular2 + Webpack <3 Presentation for ng-conf2016
JavaScript
1
star
52

string_formatted_date

A simple gem for easy date formatting!
Ruby
1
star
53

typescript-alias-webpack-plugin

This is a typescript webpack plugin that automatically maps `paths` property to webpack's `resolve.alias`
1
star