Flying Assets Webpack Plugin
A Webpack plugin generates launching HTML for both development and production.
This plugin is at very early stage. It just works good with my practices. Please let me know your idea. Pull Requests are welcome.
Install
npm install --save-dev flying-assets-webpack-plugin
Usage
Prepare your HTML page
Currently only pug is supported.
index.pug
doctype html meta(charset='utf-8')meta(name='viewport', content=[ 'width=device-width', 'initial-scale=1.0', 'maximum-scale=1.0', 'minimum-scale=1.0', 'user-scalable=no'].join(', ')) title My Awesome React Project#root #{html} mixin assets_for(chunk) if assets[chunk] && assets[chunk].styles each asset in assets[chunk].styles link(rel='stylesheet', href=`${publicPath}${asset}`) if assets[chunk] && assets[chunk].scripts each asset in assets[chunk].scripts script(src=`${publicPath}${asset}`) +assets_for('main')
webpack.*.js
const FlyingAssetsPlugin = ; moduleexports = /* ... */ plugins: /* ... */ 'index.pug' ;
For development
; ;;;;; const app = ; /* ... */ const compiler = ;const publicPath = webpackConfigoutputpublicPath; app;app;app; /* ... */
For production
;; const assets = ; const app = ; /* ... */ app;app; /* ... */
Want to do the rendering yourself?
For example, server-side rendering?
webpack.*.js
moduleexports = /* ... */ plugins: /* ... */ json: true ;
Development
app;app;
Production
applocalsassets = ;applocalspublicPath = outputpublicPath;app;