DavidWells/index.html

## index.html
<!doctype html public>
<meta charset="utf-8"/>
<title>HTML with venderPackages.dll.js</title>
<body>
<div id="root"></div>
<!-- node_modules/PROJECT-NAME-TEMP-FOLDERNAME-dll/vendorPackages.dll.js generated by postinstall.js running webpack with webpack.dll.config.js -->
<script src="/vendorPackages.dll.js"></script>
<script src="/__build__/bundle.js"></script>
</body>
</html>

## package.json
  "scripts": {
    "postinstall": "node scripts/postinstall.js",
  }
   "dllPlugin": {
    "path": "node_modules/PROJECT-NAME-TEMP-FOLDERNAME-dll"
  },

## postinstall.js
#!/usr/bin/env node
var path = require('path')
var exec = require('child_process').exec
var cwd = process.cwd()
// Check if install is local or in node_modules as dependancy b/c postinstall runs everytime anything is installed
if (cwd.indexOf('node_modules') === -1) { // You might need to tweak this check
  console.log('in local dev context. Build DLL')
  var webpackPath = path.join(cwd, 'node_modules', '.bin', 'webpack')
  exec(`${webpackPath} --display-chunks --color --config webpack.dll.config.js`, {cwd: cwd}, function (error, stdout, stderr) {
    if (error) {
      console.warn(error)
    }
    console.log(stdout)
    console.log('Built dll for local DEV')
  })
} else {
  console.log('in node_modules context, stop DLL build on postinstall')
}

## webpack.dev.config.js
/* This is the webpack config for development.
Provide the DLL to your actual dev flow with the webpack.DllReferencePlugin plugin */
var path = require('path')
var webpack = require('webpack')
var packageInfo = require('./package')
var outputPath = path.join(__dirname, '__build__')

module.exports = {
  entry: {
    'app': [
      'webpack-hot-middleware/client?http://localhost:7000',
      './src/app/index.js'
     ],
  },
  output: {
    path: __dirname + '/__build__',
    filename: '[name].js',
    chunkFilename: '[id].chunk.js',
    publicPath: '/__build__/'
  },
  resolve: {
    root: path.resolve(__dirname),
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      { test: /\.js$/, exclude: /node_modules/,
        loaders: ['babel'],
      }
  },
  plugins: [
    new webpack.DllReferencePlugin({
       context: process.cwd(),
       manifest: require(path.resolve(packageInfo.dllPlugin.path, 'vendorPackages.json')) // generated by webpack.dll.config.js
    }),
  ],

}

## webpack.dll.config.js
/**
 * Webpack config to generate DLL for faster dev flow
 */
var path = require('path')
var webpack = require('webpack')
var pkg = require('./package')
var outputPath = path.join(__dirname, pkg.dllPlugin.path) // "node_modules/PROJECT-NAME-TEMP-FOLDERNAME-dll"

module.exports = {
  context: process.cwd(),
  entry: {
    // All infrequently changed packages
    vendorPackages: [
      'react',
      'react-dom',
      'react-router',
      "c3",
      "classnames",
      "deepmerge",
      "element-class",
      "fixed-data-table",
    ]
  },

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

  plugins: [
    new webpack.DllPlugin({
      name: '[name]',
      path: path.join(outputPath, '[name].json')
    })
  ]
}
	<!doctype html public>
	<meta charset="utf-8"/>
	<title>HTML with venderPackages.dll.js</title>
	<body>
	<div id="root"></div>
	<!-- node_modules/PROJECT-NAME-TEMP-FOLDERNAME-dll/vendorPackages.dll.js generated by postinstall.js running webpack with webpack.dll.config.js -->
	<script src="/vendorPackages.dll.js"></script>
	<script src="/__build__/bundle.js"></script>
	</body>
	</html>
	"scripts": {
	"postinstall": "node scripts/postinstall.js",
	}
	"dllPlugin": {
	"path": "node_modules/PROJECT-NAME-TEMP-FOLDERNAME-dll"
	},
	#!/usr/bin/env node
	var path = require('path')
	var exec = require('child_process').exec
	var cwd = process.cwd()
	// Check if install is local or in node_modules as dependancy b/c postinstall runs everytime anything is installed
	if (cwd.indexOf('node_modules') === -1) { // You might need to tweak this check
	console.log('in local dev context. Build DLL')
	var webpackPath = path.join(cwd, 'node_modules', '.bin', 'webpack')
	exec(`${webpackPath} --display-chunks --color --config webpack.dll.config.js`, {cwd: cwd}, function (error, stdout, stderr) {
	if (error) {
	console.warn(error)
	}
	console.log(stdout)
	console.log('Built dll for local DEV')
	})
	} else {
	console.log('in node_modules context, stop DLL build on postinstall')
	}
	/* This is the webpack config for development.
	Provide the DLL to your actual dev flow with the webpack.DllReferencePlugin plugin */
	var path = require('path')
	var webpack = require('webpack')
	var packageInfo = require('./package')
	var outputPath = path.join(__dirname, '__build__')

	module.exports = {
	entry: {
	'app': [
	'webpack-hot-middleware/client?http://localhost:7000',
	'./src/app/index.js'
	],
	},
	output: {
	path: __dirname + '/__build__',
	filename: '[name].js',
	chunkFilename: '[id].chunk.js',
	publicPath: '/__build__/'
	},
	resolve: {
	root: path.resolve(__dirname),
	extensions: ['', '.js', '.jsx']
	},
	module: {
	loaders: [
	{ test: /\.js$/, exclude: /node_modules/,
	loaders: ['babel'],
	}
	},
	plugins: [
	new webpack.DllReferencePlugin({
	context: process.cwd(),
	manifest: require(path.resolve(packageInfo.dllPlugin.path, 'vendorPackages.json')) // generated by webpack.dll.config.js
	}),
	],

	}
	/**
	* Webpack config to generate DLL for faster dev flow
	*/
	var path = require('path')
	var webpack = require('webpack')
	var pkg = require('./package')
	var outputPath = path.join(__dirname, pkg.dllPlugin.path) // "node_modules/PROJECT-NAME-TEMP-FOLDERNAME-dll"

	module.exports = {
	context: process.cwd(),
	entry: {
	// All infrequently changed packages
	vendorPackages: [
	'react',
	'react-dom',
	'react-router',
	"c3",
	"classnames",
	"deepmerge",
	"element-class",
	"fixed-data-table",
	]
	},

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

	plugins: [
	new webpack.DllPlugin({
	name: '[name]',
	path: path.join(outputPath, '[name].json')
	})
	]
	}