{"id":23272662,"url":"https://github.com/whs/piped-webpack","last_synced_at":"2025-08-21T04:31:30.742Z","repository":{"id":57324776,"uuid":"95809773","full_name":"whs/piped-webpack","owner":"whs","description":"webpack as a Gulp plugin.","archived":false,"fork":false,"pushed_at":"2020-01-22T09:57:33.000Z","size":30,"stargazers_count":8,"open_issues_count":1,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-07-30T11:16:51.410Z","etag":null,"topics":["gulp-plugins","webpack"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/piped-webpack","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/whs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-06-29T18:55:20.000Z","updated_at":"2020-01-22T09:57:35.000Z","dependencies_parsed_at":"2022-09-04T11:51:29.299Z","dependency_job_id":null,"html_url":"https://github.com/whs/piped-webpack","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/whs/piped-webpack","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whs%2Fpiped-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whs%2Fpiped-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whs%2Fpiped-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whs%2Fpiped-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/whs","download_url":"https://codeload.github.com/whs/piped-webpack/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/whs%2Fpiped-webpack/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271425133,"owners_count":24757418,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-21T02:00:08.990Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gulp-plugins","webpack"],"created_at":"2024-12-19T19:18:26.116Z","updated_at":"2025-08-21T04:31:30.524Z","avatar_url":"https://github.com/whs.png","language":"JavaScript","readme":"# Piped Webpack\n\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n[![Travis Status](https://travis-ci.org/whs/piped-webpack.svg)](https://travis-ci.org/whs/piped-webpack)\n[![npm](https://img.shields.io/npm/v/piped-webpack.svg)](https://www.npmjs.com/package/piped-webpack)\n[![No Maintenance Intended](http://unmaintained.tech/badge.svg)](http://unmaintained.tech/)\n\n[webpack](https://webpack.js.org) as a [Gulp](http://gulpjs.com) plugin.\n\n## Why?\n### Why Gulp?\nWebpack already function as a great build tool, and in many cases you don't even need Gulp.\n\nCombining Gulp with webpack, however, allow you to do many more things without writing webpack plugins:\n\n- Separate CSS workflow that does not go into the bundle (eg. for non-SPA apps)\n- Mangle other type of assets with the vast collection of Gulp plugins\n- Run webpack output through Gulp plugins\n\n### Why not webpack-stream?\nAt [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:\n\n- Webpack is now on `peerDependencies`, so you can use any version you wanted without passing the instance.\n- Dump memory-fs to stream directly, so all output files will always be discovered\n- No unnecessary config mangling:\n  - We don't set `output` for you, make sure that your `output.path` is not set or set to `process.cwd()`\n  - We don't add any plugins for you (webpack-stream can add `ProgressPlugin`). If you want any plugin you can add them manually.\n- Extensible class-based design\n- Use webpack's watch system for performance\n\nThe 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.\n\nMigrating 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.\n\n## Usage\n\nInstall this module from npm:\n\n```\nnpm install --save-dev piped-webpack\n```\n\nPipe your entrypoint files to piped-webpack:\n\n```js\nconst gulp = require('gulp');\nconst pipedWebpack = require('piped-webpack');\n\ngulp.task('webpack', function(){\n\treturn gulp.src(['js/entry1.js', 'js/entry2.js'])\n\t\t.pipe(pipedWebpack({\n\t\t\t// your webpack config\n\t\t}))\n\t\t.pipe(gulp.dest(__dirname + '/static/'));\n});\n```\n\nIn the above case, the webpack config can omit the `entry` object.\n\nIf you already have `entry` set, you can pipe an empty stream to pipedWebpack:\n\n```js\ngulp.src([])\n\t.pipe(pipedWebpack({\n\t\tentry: {\n\t\t\t// your entrypoints\n\t\t},\n\t\t// your webpack config\n\t}))\n\t.pipe(gulp.dest(__dirname + '/static/'));\n```\n\nNote 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.\n\n## Tips\n### Additional entries\nIf you need to use load something in your entrypoints (eg. babel-polyfill) you can use additionalEntries option:\n\n```js\nconst gulp = require('gulp');\nconst pipedWebpack = require('piped-webpack');\n\ngulp.task('webpack', function(){\n\treturn gulp.src(['js/entry1.js', 'js/entry2.js'])\n\t\t.pipe(pipedWebpack({\n\t\t\t// your webpack config\n\t\t\tadditionalEntries: ['babel-polyfill'],\n\t\t}))\n\t\t.pipe(gulp.dest(__dirname + '/static/'));\n```\n\nYou 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.\n\n### Submit source maps to Sentry\nHere's how we submit source maps to Sentry, and removing it from production servers\n\n```js\nconst gulp = require('gulp');\nconst filter = require('gulp-filter');\nconst sentryRelease = require('gulp-sentry-release');\nconst merge = require('merge-stream');\nconst pipedWebpack = require('piped-webpack');\n\nconst SENTRY_URL = 'https://app.getsentry.com/api/0/projects/mycompany/myapp/';\nconst SENTRY_API_KEY = 'apikeygoeshere'; // see gulp-sentry-release docs on how to get this key\n\nconst webpackConfig = {\n\t// ...\n\t// sentry requires that your source map have a visible comment\n\tdevtool: 'source-map',\n};\n\ngulp.task('webpack', function(){\n\t// filter out source maps\n\tlet mapFilter = filter(['**', '!**/*.map'], {restore: true, passthrough: false});\n\n\tlet codeStream = gulp.src(['*/js/*.js', '!static/**'])\n\t\t.pipe(pipedWebpack(webpackConfig))\n\t\t.pipe(mapFilter) // remove all map files\n\t\t.pipe(gulp.dest(__dirname + '/static/'));\n\n\tlet mapStream = mapFilter.restore\n\t\t.pipe(sentryRelease({\n\t\t\tAPI_URL: SENTRY_URL,\n\t\t\tAPI_KEY: SENTRY_API_KEY,\n\t\t\tDOMAIN: '~',\n\t\t\tversion: '1.0.0', // you can use git-rev to update this automatically\n\t\t}).release());\n\n\treturn merge(codeStream, mapStream);\n});\n```\n\n### Watching\nSet `watch: true` in your configuration to use webpack's watch system. This can be done like this:\n\n```js\ngulp.task('webpack', function(){\n\t// invoke your webpack normally\n});\ngulp.task('watch', function(){\n\twebpackConfig.watch = true;\n\tgulp.start('webpack');\n});\n```\n\n## License\npiped-webpack is licensed under the [MIT License](LICENSE)\n\nThis project is [unmaintained](http://unmaintained.tech/). You may use it, but issues and pull requests might be ignored.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhs%2Fpiped-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwhs%2Fpiped-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwhs%2Fpiped-webpack/lists"}