Piped Webpack
Why?
Why Gulp?
Webpack already function as a great build tool, and in many cases you don't even need Gulp.
Combining Gulp with webpack, however, allow you to do many more things without writing webpack plugins:
- Separate CSS workflow that does not go into the bundle (eg. for non-SPA apps)
- Mangle other type of assets with the vast collection of Gulp plugins
- Run webpack output through Gulp plugins
Why not webpack-stream?
At TipMe we started out with webpack-stream. However, we found that it doesn't work with DllPlugin (#149). So we set out to create a new implementation:
- Webpack is now on
peerDependencies
, so you can use any version you wanted without passing the instance. - Dump memory-fs to stream directly, so all output files will always be discovered
- No unnecessary config mangling:
- We don't set
output
for you, make sure that youroutput.path
is not set or set toprocess.cwd()
- We don't add any plugins for you (webpack-stream can add
ProgressPlugin
). If you want any plugin you can add them manually.
- We don't set
- Extensible class-based design
- Use webpack's watch system for performance
The reason we name this as piped-webpack is because webpack-stream also appear as gulp-webpack on npm.
Migrating from webpack-stream is simple: just change your require
to piped-webpack
and, if you're passing webpack instance, remove it. Also remove callback argument if you're using it. We'll implement something later.
Usage
Install this module from npm:
npm install --save-dev piped-webpack
Pipe your entrypoint files to piped-webpack:
const gulp = ;const pipedWebpack = ; gulp;
In the above case, the webpack config can omit the entry
object.
If you already have entry
set, you can pipe an empty stream to pipedWebpack:
gulp ;
Note that due to webpack's limitation we don't actually use the files from stream, only path. Therefore, don't pipe anything else but gulp.src
into this plugin.
Tips
Additional entries
If you need to use load something in your entrypoints (eg. babel-polyfill) you can use additionalEntries option:
const gulp = ;const pipedWebpack = ; gulp
You can also specify a function that returns an array. The function will receive Vinyl file object as argument.
Submit source maps to Sentry
Here's how we submit source maps to Sentry, and removing it from production servers
const gulp = ;const filter = ;const sentryRelease = ;const merge = ;const pipedWebpack = ; const SENTRY_URL = 'https://app.getsentry.com/api/0/projects/mycompany/myapp/';const SENTRY_API_KEY = 'apikeygoeshere'; // see gulp-sentry-release docs on how to get this key const webpackConfig = // ... // sentry requires that your source map have a visible comment devtool: 'source-map'; gulp;
Watching
Set watch: true
in your configuration to use webpack's watch system. This can be done like this:
gulp;gulp;
License
piped-webpack is licensed under the MIT License