https://github.com/whs/piped-webpack
webpack as a Gulp plugin.
https://github.com/whs/piped-webpack
gulp-plugins webpack
Last synced: 7 months ago
JSON representation
webpack as a Gulp plugin.
- Host: GitHub
- URL: https://github.com/whs/piped-webpack
- Owner: whs
- License: mit
- Created: 2017-06-29T18:55:20.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2020-01-22T09:57:33.000Z (about 6 years ago)
- Last Synced: 2025-07-30T11:16:51.410Z (7 months ago)
- Topics: gulp-plugins, webpack
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/piped-webpack
- Size: 29.3 KB
- Stars: 8
- Watchers: 3
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Piped Webpack
[](LICENSE)
[](https://travis-ci.org/whs/piped-webpack)
[](https://www.npmjs.com/package/piped-webpack)
[](http://unmaintained.tech/)
[webpack](https://webpack.js.org) as a [Gulp](http://gulpjs.com) plugin.
## 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](https://tipme.in.th) we started out with [webpack-stream](https://github.com/shama/webpack-stream). However, we found that it doesn't work with DllPlugin ([#149](https://github.com/shama/webpack-stream/issues/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 your `output.path` is not set or set to `process.cwd()`
- We don't add any plugins for you (webpack-stream can add `ProgressPlugin`). If you want any plugin you can add them manually.
- 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](https://www.npmjs.com/package/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:
```js
const gulp = require('gulp');
const pipedWebpack = require('piped-webpack');
gulp.task('webpack', function(){
return gulp.src(['js/entry1.js', 'js/entry2.js'])
.pipe(pipedWebpack({
// your webpack config
}))
.pipe(gulp.dest(__dirname + '/static/'));
});
```
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:
```js
gulp.src([])
.pipe(pipedWebpack({
entry: {
// your entrypoints
},
// your webpack config
}))
.pipe(gulp.dest(__dirname + '/static/'));
```
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:
```js
const gulp = require('gulp');
const pipedWebpack = require('piped-webpack');
gulp.task('webpack', function(){
return gulp.src(['js/entry1.js', 'js/entry2.js'])
.pipe(pipedWebpack({
// your webpack config
additionalEntries: ['babel-polyfill'],
}))
.pipe(gulp.dest(__dirname + '/static/'));
```
You can also specify a function that returns an array. The function will receive [Vinyl file](https://github.com/gulpjs/vinyl#new-vinyloptions) object as argument.
### Submit source maps to Sentry
Here's how we submit source maps to Sentry, and removing it from production servers
```js
const gulp = require('gulp');
const filter = require('gulp-filter');
const sentryRelease = require('gulp-sentry-release');
const merge = require('merge-stream');
const pipedWebpack = require('piped-webpack');
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.task('webpack', function(){
// filter out source maps
let mapFilter = filter(['**', '!**/*.map'], {restore: true, passthrough: false});
let codeStream = gulp.src(['*/js/*.js', '!static/**'])
.pipe(pipedWebpack(webpackConfig))
.pipe(mapFilter) // remove all map files
.pipe(gulp.dest(__dirname + '/static/'));
let mapStream = mapFilter.restore
.pipe(sentryRelease({
API_URL: SENTRY_URL,
API_KEY: SENTRY_API_KEY,
DOMAIN: '~',
version: '1.0.0', // you can use git-rev to update this automatically
}).release());
return merge(codeStream, mapStream);
});
```
### Watching
Set `watch: true` in your configuration to use webpack's watch system. This can be done like this:
```js
gulp.task('webpack', function(){
// invoke your webpack normally
});
gulp.task('watch', function(){
webpackConfig.watch = true;
gulp.start('webpack');
});
```
## License
piped-webpack is licensed under the [MIT License](LICENSE)
This project is [unmaintained](http://unmaintained.tech/). You may use it, but issues and pull requests might be ignored.