juukie/package.json.js

## package.json.js
{
  "private": true,
  // ...
  "#dependencies": "dependencies are the one shipped to the client",
  "dependencies": {
    "babel-polyfill": "^6.7.4",
    "react": "^15.0.0",
    // ...
    "whatwg-fetch": "^0.11.1"
  },
  "devDependencies": {
    // ...
    "webpack": "^2.1.0-beta.13",
    "webpack-dev-server": "^2.1.0-beta",
    "webpack-notifier": "^1.3.0"
  },
  "scripts": {
    "dll": "webpack --config webpack.dll.config.babel.js",
    "postinstall": "npm -s run dll",
    "dev-server": "webpack-dev-server --open --env.dll",
    "start": "npm -s run dev-server"
    // ...
  },
  // ...
}

## src__index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- ... -->
    <% for (var chunk in htmlWebpackPlugin.options.externals) { %><script src="<%=htmlWebpackPlugin.options.externals[chunk] %>"></script><% } %>
    <% for (var chunk in htmlWebpackPlugin.files.chunks) { %><script src="<%=htmlWebpackPlugin.files.chunks[chunk].entry %>"></script><% } %>
  </body>
</html>

## webpack.config.babel.js
import { join } from "path"

import {
  HotModuleReplacementPlugin,
  DllReferencePlugin,
} from "webpack"
import WebpackNotifierPlugin from "webpack-notifier"

import HtmlWebpackPlugin from "html-webpack-plugin"


const defaultEnv = {
  production: process.env.NODE_ENV === "production",
  dev: !process.env.NODE_ENV || process.env.NODE_ENV === "",
  test: process.env.NODE_ENV === "test",
}

export default (env) => {
  env = {
    ...defaultEnv,
    ...env,
  }

  return {
    module: {
      loaders: [
        // ...
      ],
    },

    plugins: [
      new HtmlWebpackPlugin({
        template: join(__dirname, "entry", "index.html"),
        inject: false,
        ...env.dll && {
          externals: [ "/dependencies.dll.js" ],
        },
      }),

      ...env.dev ? [
        new WebpackNotifierPlugin(),
        new HotModuleReplacementPlugin(),
      ] : [],

      ...env.dll ? [
        new DllReferencePlugin({
          context: __dirname,
          // generated by webpack.dll.config.babel.js
          manifest: require("./dist/dependencies.dll.manifest.json"),
          // name: "./dist/dependencies.dll.js",
        }),
      ] : [],
    ],

    entry: {
      // ...
    },

    output: {
      // publicPath has to be defined so HtmlWebpackPlugin serve correct js
      // in script tags
      // (because historyApiFallback will root things like /a/b to the
      // index.html, and script tag need a absolute url for the script)
      publicPath: "/",

      path: "dist",
      filename: "[name].[hash].js",
    },

    devServer: {
      // when you serve static files during development, this is necessary
      // eg: dependencies.dll.js
      contentBase: "dist",
    },
  }
}

## webpack.dll.config.babel.js
import path from "path"
import webpack from "webpack"
import pkg from "./package.json"

const outputPath = path.join(__dirname, "dist")

module.exports = {
  context: process.cwd(),
  entry: {
    dependencies: Object.keys(pkg.dependencies),
  },

  output: {
    filename: "[name].dll.js",
    path: outputPath,
    library: "[name]",
  },

  plugins: [
    new webpack.DllPlugin({
      context: __dirname,
      name: "[name]",
      path: path.join(outputPath, "[name].dll.manifest.json"),
    }),
  ],
}
	{
	"private": true,
	// ...
	"#dependencies": "dependencies are the one shipped to the client",
	"dependencies": {
	"babel-polyfill": "^6.7.4",
	"react": "^15.0.0",
	// ...
	"whatwg-fetch": "^0.11.1"
	},
	"devDependencies": {
	// ...
	"webpack": "^2.1.0-beta.13",
	"webpack-dev-server": "^2.1.0-beta",
	"webpack-notifier": "^1.3.0"
	},
	"scripts": {
	"dll": "webpack --config webpack.dll.config.babel.js",
	"postinstall": "npm -s run dll",
	"dev-server": "webpack-dev-server --open --env.dll",
	"start": "npm -s run dev-server"
	// ...
	},
	// ...
	}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<title><%= htmlWebpackPlugin.options.title %></title>
	</head>
	<body>
	<!-- ... -->
	<% for (var chunk in htmlWebpackPlugin.options.externals) { %><script src="<%=htmlWebpackPlugin.options.externals[chunk] %>"></script><% } %>
	<% for (var chunk in htmlWebpackPlugin.files.chunks) { %><script src="<%=htmlWebpackPlugin.files.chunks[chunk].entry %>"></script><% } %>
	</body>
	</html>
	import { join } from "path"

	import {
	HotModuleReplacementPlugin,
	DllReferencePlugin,
	} from "webpack"
	import WebpackNotifierPlugin from "webpack-notifier"

	import HtmlWebpackPlugin from "html-webpack-plugin"


	const defaultEnv = {
	production: process.env.NODE_ENV === "production",
	dev: !process.env.NODE_ENV \|\| process.env.NODE_ENV === "",
	test: process.env.NODE_ENV === "test",
	}

	export default (env) => {
	env = {
	...defaultEnv,
	...env,
	}

	return {
	module: {
	loaders: [
	// ...
	],
	},

	plugins: [
	new HtmlWebpackPlugin({
	template: join(__dirname, "entry", "index.html"),
	inject: false,
	...env.dll && {
	externals: [ "/dependencies.dll.js" ],
	},
	}),

	...env.dev ? [
	new WebpackNotifierPlugin(),
	new HotModuleReplacementPlugin(),
	] : [],

	...env.dll ? [
	new DllReferencePlugin({
	context: __dirname,
	// generated by webpack.dll.config.babel.js
	manifest: require("./dist/dependencies.dll.manifest.json"),
	// name: "./dist/dependencies.dll.js",
	}),
	] : [],
	],

	entry: {
	// ...
	},

	output: {
	// publicPath has to be defined so HtmlWebpackPlugin serve correct js
	// in script tags
	// (because historyApiFallback will root things like /a/b to the
	// index.html, and script tag need a absolute url for the script)
	publicPath: "/",

	path: "dist",
	filename: "[name].[hash].js",
	},

	devServer: {
	// when you serve static files during development, this is necessary
	// eg: dependencies.dll.js
	contentBase: "dist",
	},
	}
	}
	import path from "path"
	import webpack from "webpack"
	import pkg from "./package.json"

	const outputPath = path.join(__dirname, "dist")

	module.exports = {
	context: process.cwd(),
	entry: {
	dependencies: Object.keys(pkg.dependencies),
	},

	output: {
	filename: "[name].dll.js",
	path: outputPath,
	library: "[name]",
	},

	plugins: [
	new webpack.DllPlugin({
	context: __dirname,
	name: "[name]",
	path: path.join(outputPath, "[name].dll.manifest.json"),
	}),
	],
	}