DEPRECATED in favour of webpack-build
webpack-wrapper
A wrapper library which provides a variety of optimisations and utilities intended to assist with integrating webpack into a build process.
Features
- Supports multiple concurrent compilers
- Uses a persistent caching layer to reduce build times
- Provides a simple hook to extend a server for HMR support
- Provides config hooks to ensure that your config files reflect the current environment
- Provides build functions to add typical dev/hmr/prod features to your config files
- Pre-processes compilation output so that it can be serialized and efficiently passed between processes
- Provides a helper to redirect the compiler's output to a particular directory
- Provides watchers to detect changes to your config files
Documentation
Installation
npm install webpack-wrapper
Basic usage
var webpack = ; { // Besides the usual stats data produced by webpack, the wrapper adds // some extra props... // The config object generated by webpack statswebpackConfig // An object mapping asset names to the full path of the generated asset statspathsToAssets // An object mapping asset names to the full url of the generated asset. // Requires the `staticRoot` and `staticUrl` settings to be defined statsurlsToAssets // An array of rendered <script> elements pointing to the JS assets statsrenderedscripts // An array of rendered <link> elements pointing to the CSS assets statsrenderedstyleSheets});
Configuration
var webpack = ; ;
Caching
The wrapper uses a mixture of file and memory caches to improve build times. Specifying the cacheFile
option will allow the wrapper to persist the cache to disk, which can boost build times.
When a request comes in and the cache has a record matching the cacheKey
option, the cached data is
compared against the current timestamps on both the config file and the source files. If the file system
indicates that the cached data may be out of date, the wrapper will ignore the cached data and then
wait for webpack to complete a fresh build.
If the watch
option is set to true, as soon as the cached data is served, the watcher is started in
the background.
Whenever a compiler successfully builds, the cache is immediately updated with the output from the build process.
If you want to read cache files from another process, you should probably define the cacheKey
or hash
options to ensure that the cache entries are easily accessible.
Builds
Builds are functions which mutate a config file to reflect varying environments.
Builds should be specified in your config file under a builds
object which contains functions.
The functions should return a config object which can be read by webpack's compiler.
// In your config file var builds = ; moduleexports = // ... builds: { configdevtool = 'eval'; configloaders; return config; } { configdevtool = 'source-map'; return config } ;
To apply any builds, simply pass in the build
option to the wrapper
var webpack = ; ;
The wrapper comes with some typical builds that you can apply to handle common situations.
// In your config file var builds = ; moduleexports = // ... builds: { // Apply the wrapper's dev build config = builds; // Apply the wrapper's hmr build config = builds; return config; } ;
improve
improve;
Adds new webpack.optimize.OccurrenceOrderPlugin()
Adds new webpack.NoErrorsPlugin()
dev
dev;
Applies the improve
build
Sets devtool
to eval-source-maps
Sets output.pathinfo
to true
Adds
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('development')
}
})
hmr
hmr;
Applies the improve
build
Adds webpack-wrapper/lib/hmr/client?...
and webpack/hot/only-dev-server
to the config's entries.
These enable the client-side to talk to the HMR endpoint.
Adds new webpack.HotModuleReplacementPlugin()
Sets output.publicPath
to the value of the staticUrl
option
Sets recordsPath
to path.join(opts.outputPath, 'webpack.records-' + opts.hash + '.json');
prod
prod;
Applies the improve
build
Sets devtool
to source-map
Adds new webpack.optimize.DedupePlugin()
Adds new webpack.optimize.UglifyJsPlugin()
Adds
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
HMR
The wrapper includes hooks to add HMR functionality to both your front-end and back-end.
// To use it with express var http = ;var express = ;var webpack = ; var app = ;var server = http; webpackhmr; server;
The addTo
method adds a socket.io handler to the endpoint defined by the hmrPath
option,
which defaults to /__webpack_hmr__
. You can provide a second argument to addTo
to
change the path, but you'll need to provide that same value as the hmrPath
option whenever
you call the wrapper.
And ensure that you inform the wrapper to apply the hmr build with respect to your server setup
var webpack = ; ;
Colophon
Large portions of this codebase are heavily indebted to webpack-dev-middleware and webpack-dev-server.
This project stands on the shoulders of giants - specifically, Tobias Koppers and the webpack ecosystem's vast number of contributors.