Our asset pipeline for finbox.io and beyond. This module picks up where www-bundle leaves off. We recently ran into a wall using React, where our Javascript was 800kb minified, cause our site to take around 3 seconds to load.
We needed asynchronous loading to bring the initial payload down but it's nearly impossible to do that with Browserify, while not including the same module multiple times. I explored external modules as well as factor bundle, but they are just not precise enough tools.
Everyone's environment is a bit different, so I don't imagine this would be super useful to others, without building it yourself.
That being said, I did spent quite a bit of time tweaking things to make the environment less verbose and turned on most of the nice features of webpack, so maybe you can use this repository as a reference.
- Automatic combining of common code (via
/common.js) - It's middleware so you don't need to run two servers
- Javascript, CSS, HTML, JSON, and markdown support
- Lives outside of your main app (it's a module)
- Local CSS module support (via
.stylefiles) - Automatic inlining of CSS assets under 10kb
- PostCSS with CSSnext built in
- Asynchronous module loading
- ES6 support via Babel
- Local CSS Modules
- Hot reloading
npm install webpack-www-bundle
First you'll want to configure the build. This will be application specific and mostly depends on your entry points and how you want to structure the app.
webpack.js
var webpack = require('webpack')
var join = require('path').join
var root = join(__dirname, '..', '..')
var config = require('webpack-www-bundle')(root, {
entry: {
dashboard: join(root, 'pages', 'dashboard', 'dashboard.jsx')
},
output: {
path: join(root, 'dist'),
filename: join('pages', '[name]', '[name].jsx')
}
})
module.exports = webpack(config)Here's the server middleware you'll need to get this module working. You'll need to install koa-webpack-dev-middleware and koa-webpack-hot-middleware if you're using koa with hot-reloading:
server.js
// the file above
var webpack = require('./lib/webpack');
if (process.env.NODE_ENV !== 'production') {
app.use(require('koa-webpack-dev-middleware')(webpack, {
noInfo: true,
stats: 'errors-only'
}));
app.use(require('koa-webpack-hot-middleware')(webpack, {
logs: false
}));
}
app.static('dist');Then in your HTML, you'll want something like this:
<html>
<head>
{#production}
<!--
in dev, CSS is placed in <style> tags,
in prod, it's extracted out. this will
reference that bundle in production.
-->
<link href="/pages/dashboard/dashboard.css" />
{/production}
</head>
<body>
<!-- chunks common to all your entries -->
<script src='/common.js'></script>
<!-- your page build -->
<script src='/pages/dashboard/dashboard.js'></script>
</body>Development:
make development
Production:
make build
make production