1 | # webpack-stream [![Build Status](http://img.shields.io/travis/shama/webpack-stream.svg)](https://travis-ci.org/shama/webpack-stream)
|
2 |
|
3 | Run [webpack](https://github.com/webpack/webpack) as a stream to conveniently integrate with gulp.
|
4 |
|
5 | [![NPM](https://nodei.co/npm/webpack-stream.png?downloads=true)](https://nodei.co/npm/webpack-stream/)
|
6 |
|
7 | ## Usage
|
8 |
|
9 | ```js
|
10 | var gulp = require('gulp');
|
11 | var webpack = require('webpack-stream');
|
12 | gulp.task('default', function() {
|
13 | return gulp.src('src/entry.js')
|
14 | .pipe(webpack())
|
15 | .pipe(gulp.dest('dist/'));
|
16 | });
|
17 | ```
|
18 |
|
19 | The above will compile `src/entry.js` into assets with webpack into `dist/` with the output filename of `[hash].js` (webpack generated hash of the build).
|
20 |
|
21 | You can pass webpack options in with the first argument, including `watch` which will greatly decrease compilation times:
|
22 |
|
23 | ```js
|
24 | return gulp.src('src/entry.js')
|
25 | .pipe(webpack({
|
26 | watch: true,
|
27 | module: {
|
28 | loaders: [
|
29 | { test: /\.css$/, loader: 'style!css' },
|
30 | ],
|
31 | },
|
32 | }))
|
33 | .pipe(gulp.dest('dist/'));
|
34 | ```
|
35 |
|
36 | Or just pass in your `webpack.config.js`:
|
37 |
|
38 | ```js
|
39 | return gulp.src('src/entry.js')
|
40 | .pipe(webpack( require('./webpack.config.js') ))
|
41 | .pipe(gulp.dest('dist/'));
|
42 | ```
|
43 |
|
44 | If you would like to use a different version of webpack than the one this plugin uses, pass in an optional 2nd argument:
|
45 |
|
46 | ```js
|
47 | var gulp = require('gulp');
|
48 | var webpack = require('webpack');
|
49 | var gulpWebpack = require('webpack-stream');
|
50 | gulp.task('default', function() {
|
51 | return gulp.src('src/entry.js')
|
52 | .pipe(gulpWebpack({}, webpack))
|
53 | .pipe(gulp.dest('dist/'));
|
54 | });
|
55 | ```
|
56 |
|
57 | Pass in 3rd argument if you want to access the stats outputted from webpack when the compilation is done:
|
58 |
|
59 |
|
60 | ```js
|
61 | var gulp = require('gulp');
|
62 | var webpack = require('webpack-stream');
|
63 | gulp.task('default', function() {
|
64 | return gulp.src('src/entry.js')
|
65 | .pipe(webpack({
|
66 | /* config */
|
67 | }, null, function(err, stats) {
|
68 | /* Use stats to do more things if needed */
|
69 | }))
|
70 | .pipe(gulp.dest('dist/'));
|
71 | });
|
72 | ```
|
73 |
|
74 | #### Multiple Entry Points
|
75 |
|
76 | A common request is how to handle multiple entry points. You can continue to pass in an `entry` option in your typical webpack config like so:
|
77 |
|
78 | ```js
|
79 | var gulp = require('gulp');
|
80 | var webpack = require('webpack-stream');
|
81 | gulp.task('default', function() {
|
82 | return gulp.src('src/entry.js')
|
83 | .pipe(webpack({
|
84 | entry: {
|
85 | app: 'src/app.js',
|
86 | test: 'test/test.js',
|
87 | },
|
88 | output: {
|
89 | filename: '[name].js',
|
90 | },
|
91 | }))
|
92 | .pipe(gulp.dest('dist/'));
|
93 | });
|
94 | ```
|
95 |
|
96 | Or pipe files through a stream that names the chunks. A convenient library for this is [vinyl-named](https://github.com/shama/vinyl-named):
|
97 |
|
98 | ```js
|
99 | var gulp = require('gulp');
|
100 | var webpack = require('webpack-stream');
|
101 | var named = require('vinyl-named');
|
102 | gulp.task('default', function() {
|
103 | return gulp.src(['src/app.js', 'test/test.js'])
|
104 | .pipe(named())
|
105 | .pipe(webpack())
|
106 | .pipe(gulp.dest('dist/'));
|
107 | });
|
108 | ```
|
109 |
|
110 | The above `named()` stream will add a `.named` property to the vinyl files passing through. The `webpack()` stream will read those as entry points and even group entry points with common names together.
|
111 |
|
112 | ## Release History
|
113 | * 2.1.0 - Avoid modifying options by reference (@shinuza). Replace log with correct package name (@vinnymac).
|
114 | * 2.0.0 - Rename to webpack-stream and now it's totally not a gulp plugin.
|
115 | * 1.5.0 - Update webpack to 1.9.x (@nmccready). Update other dependencies.
|
116 | * 1.4.0 - Update webpack to 1.8.x (@Zolmeister).
|
117 | * 1.3.2 - Fix another place with ? in name (@raphaelluchini).
|
118 | * 1.3.1 - Fix for paths with ? in their name (@raphaelluchini).
|
119 | * 1.3.0 - Updating to webpack >= 1.7.
|
120 | * 1.2.0 - Updating to webpack >= 1.5, vinyl >= 0.4, memory-fs >= 0.2.
|
121 | * 1.1.2 - Fixes to default stats for logging (@mdreizin).
|
122 | * 1.1.1 - Add additional stats to default logging (@mdreizin).
|
123 | * 1.1.0 - Exposes internal webpack if asked via `require('webpack-stream').webpack`
|
124 | * 1.0.0 - Support named chunks pipe'd in for multiple entry points.
|
125 | * 0.4.1 - Fixed regression for multiple entry point support.
|
126 | * 0.4.0 - Display an error message if there are no input files (@3onyc). Add message on why task is not finishing, Add ability to track compilation progress, Add ability to configure stats output via options (@kompot). Bump webpack version (@koistya).
|
127 | * 0.3.0 - Update deps (@kompot). Fixes to determining entry (@btipling and @abergs).
|
128 | * 0.2.0 - Support for `watch` mode (@ampedandwired).
|
129 | * 0.1.0 - Initial release
|
130 |
|
131 | ## License
|
132 | Copyright (c) 2015 Kyle Robinson Young
|
133 | Licensed under the MIT license.
|