Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Webpack DLL setup for projects. How it works: https://github.com/MoOx/phenomic/issues/532#issuecomment-233830928
<!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')
})
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment