TheLarkInn

#!/bin/bash

ARRAY=(
"webpack:webpack"
"webpack:example-app"
"webpack:enhanced-require"
"webpack:webpack-dev-middleware"
"webpack:enhanced-resolve"
"webpack:template"
"webpack:webpack-dev-server"

TheLarkInn

How

• copy tapable.log.js code into your tapable node module
• git clone https://github.com/if12/webpack-travel
• yarn
• yarn build:notruntime > path/to/file

Why

It will be clear to understand the flow of webpack.

TheLarkInn

import("./abc.js").then(abc => abc.doIt());

TheLarkInn

import("./abc.js").then(abc => abc.doIt()); 

TheLarkInn

import(/* webpackChunkName: "my-chunk-name" */ 'module');

TheLarkInn

const createClass = () => {
    return class {
        constructor(options) { this.options = options || {}; }
    };
}

const Plugin = (x) => (
    return {
        map: f => Plugin(f(x)),

TheLarkInn

const MODULE_DIR = /(.*([\/\\]node_modules|\.\.)[\/\\](@[^\/\\]+[\/\\])?[^\/\\]+)([\/\\].*)?$/g;

{
	loader: 'babel-loader',
	test: /\.jsx?$/,
	include(filepath) {
		if (filepath.split(/[/\\]/).indexOf('node_modules')===-1) return true;
		let pkg, manifest = path.resolve(filepath.replace(MODULE_DIR, '$1'), 'package.json');
		try { pkg = JSON.parse(fs.readFileSync(manifest)); } catch (e) {}
		return !!(pkg.modules || pkg['jsnext:main']);

TheLarkInn

module.exports = config; 

const config = {
  module: {
    rules: [ //<=== 'loaders' works as a fallback but for .23+ best to start using "rules" instead.
      {
        test: /\.less/, 
        loaders: [
          "style-loader",
          {loader: "css-loader", query: {}},

TheLarkInn

When you use the names property in the CommonsChunkPlugin({}) and pass an array as the value, webpack converts what is seen below:

      new webpack.optimize.CommonsChunkPlugin({
        names: ['app', 'vendor', 'manifest'],  // creating manifest.js 
        minChunks: Infinity
      })

Into:

TheLarkInn

Angular2 Starter Plunker - Typescript - RC.0

A simple plunker demonstrating Angular2 usage:

• Uses SystemJS + TypeScript to compile on the fly
• Includes binding, directives, http, pipes, and DI usage.