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 |
|
8 | ## Installation
|
9 | If you have `npm` run the following command in the console `npm install --save-dev webpack-stream`
|
10 |
|
11 |
|
12 | ## Usage
|
13 |
|
14 | ```js
|
15 | const gulp = require('gulp');
|
16 | const webpack = require('webpack-stream');
|
17 | gulp.task('default', function() {
|
18 | return gulp.src('src/entry.js')
|
19 | .pipe(webpack())
|
20 | .pipe(gulp.dest('dist/'));
|
21 | });
|
22 | ```
|
23 |
|
24 | 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).
|
25 |
|
26 | You can pass webpack options in with the first argument, including `watch` which will greatly decrease compilation times:
|
27 |
|
28 | ```js
|
29 | return gulp.src('src/entry.js')
|
30 | .pipe(webpack({
|
31 | watch: true,
|
32 | module: {
|
33 | loaders: [
|
34 | { test: /\.css$/, loader: 'style!css' },
|
35 | ],
|
36 | },
|
37 | }))
|
38 | .pipe(gulp.dest('dist/'));
|
39 | ```
|
40 |
|
41 | Or just pass in your `webpack.config.js`:
|
42 |
|
43 | ```js
|
44 | return gulp.src('src/entry.js')
|
45 | .pipe(webpack( require('./webpack.config.js') ))
|
46 | .pipe(gulp.dest('dist/'));
|
47 | ```
|
48 |
|
49 | If you would like to use a different version of webpack than the one this plugin uses, pass in an optional 2nd argument:
|
50 |
|
51 | ```js
|
52 | const gulp = require('gulp');
|
53 | const webpack = require('webpack');
|
54 | const gulpWebpack = require('webpack-stream');
|
55 | gulp.task('default', function() {
|
56 | return gulp.src('src/entry.js')
|
57 | .pipe(gulpWebpack({}, webpack))
|
58 | .pipe(gulp.dest('dist/'));
|
59 | });
|
60 | ```
|
61 |
|
62 | Pass in 3rd argument if you want to access the stats outputted from webpack when the compilation is done:
|
63 |
|
64 |
|
65 | ```js
|
66 | const gulp = require('gulp');
|
67 | const webpack = require('webpack-stream');
|
68 | gulp.task('default', function() {
|
69 | return gulp.src('src/entry.js')
|
70 | .pipe(webpack({
|
71 | /* config */
|
72 | }, null, function(err, stats) {
|
73 | /* Use stats to do more things if needed */
|
74 | }))
|
75 | .pipe(gulp.dest('dist/'));
|
76 | });
|
77 | ```
|
78 |
|
79 | #### Multiple Entry Points
|
80 |
|
81 | 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:
|
82 |
|
83 | ```js
|
84 | const gulp = require('gulp');
|
85 | const webpack = require('webpack-stream');
|
86 | gulp.task('default', function() {
|
87 | return gulp.src('src/entry.js')
|
88 | .pipe(webpack({
|
89 | entry: {
|
90 | app: 'src/app.js',
|
91 | test: 'test/test.js',
|
92 | },
|
93 | output: {
|
94 | filename: '[name].js',
|
95 | },
|
96 | }))
|
97 | .pipe(gulp.dest('dist/'));
|
98 | });
|
99 | ```
|
100 |
|
101 | Or pipe files through a stream that names the chunks. A convenient library for this is [vinyl-named](https://github.com/shama/vinyl-named):
|
102 |
|
103 | ```js
|
104 | const gulp = require('gulp');
|
105 | const webpack = require('webpack-stream');
|
106 | const named = require('vinyl-named');
|
107 | gulp.task('default', function() {
|
108 | return gulp.src(['src/app.js', 'test/test.js'])
|
109 | .pipe(named())
|
110 | .pipe(webpack())
|
111 | .pipe(gulp.dest('dist/'));
|
112 | });
|
113 | ```
|
114 |
|
115 | 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.
|
116 |
|
117 | #### Source Maps
|
118 |
|
119 | Source maps are built into webpack, specify a [devtool](https://webpack.github.io/docs/configuration.html#devtool):
|
120 |
|
121 | ```js
|
122 | const gulp = require('gulp');
|
123 | const webpack = require('webpack-stream');
|
124 | const named = require('vinyl-named');
|
125 | gulp.task('default', function() {
|
126 | return gulp.src(['src/app.js', 'test/test.js'])
|
127 | .pipe(named())
|
128 | .pipe(webpack({
|
129 | devtool: 'source-map'
|
130 | }))
|
131 | .pipe(gulp.dest('dist/'));
|
132 | });
|
133 | ```
|
134 |
|
135 | Now the appropriate `.map` files will be emitted. Or set to `inline-source-map`
|
136 | to inline the source maps into the files.
|
137 |
|
138 | If you need further special handling of source maps, such as using with
|
139 | [gulp-sourcemaps](https://github.com/floridoo/gulp-sourcemaps) then just pipe
|
140 | to a stream and handle the source map files emitted by webpack:
|
141 |
|
142 | ```js
|
143 | const gulp = require('gulp');
|
144 | const webpack = require('webpack-stream');
|
145 | const named = require('vinyl-named');
|
146 | const through = require('through2');
|
147 | const sourcemaps = require('gulp-sourcemaps');
|
148 | gulp.task('default', function() {
|
149 | return gulp.src(['src/app.js', 'test/test.js'])
|
150 | .pipe(named())
|
151 | .pipe(webpack({
|
152 | devtool: 'source-map'
|
153 | }))
|
154 | .pipe(sourcemaps.init({loadMaps: true}))
|
155 | .pipe(through.obj(function (file, enc, cb) {
|
156 | // Dont pipe through any source map files as it will be handled
|
157 | // by gulp-sourcemaps
|
158 | const isSourceMap = /\.map$/.test(file.path);
|
159 | if (!isSourceMap) this.push(file);
|
160 | cb();
|
161 | }))
|
162 | .pipe(sourcemaps.write('.'))
|
163 | .pipe(gulp.dest('dist/'));
|
164 | });
|
165 | ```
|
166 |
|
167 | #### Multi-compiler support
|
168 |
|
169 | Multiple compilers are supported, but instead of passing the webpack configuration directly, you have to wrap it in an object under the key 'config'.
|
170 |
|
171 | ```js
|
172 | const gulp = require('gulp');
|
173 | const webpack = require('webpack-stream');
|
174 | gulp.task('default', function() {
|
175 | return gulp.src('src/entry.js')
|
176 | .pipe(webpack({
|
177 | config : require('./webpack.config.js')
|
178 | }))
|
179 | .pipe(gulp.dest('dist/'));
|
180 | });
|
181 | ```
|
182 |
|
183 | ## Release History
|
184 | * Please check the [commit log](https://github.com/shama/webpack-stream/commits/master) in the future for release history.
|
185 | * 4.0.0 - Update `webpack` to `^3.4.1`. Update `memory-fs` and `vinyl` dependencies. Emit `compilation-error` instead of `error` when watching (@jeroennoten). Fix error when compiler throws an error (@renminghao). Fix error when stats is undefined (@Simek).
|
186 | * 3.2.0 - Ability to use multiple compilers (@saschagehlich).
|
187 | * 3.1.0 - Better error output (@hi-q).
|
188 | * 3.0.1 - Fix fonts being passed through streams (@mattlewis92).
|
189 | * 3.0.0 - Remove special handling of source maps. Update dependencies.
|
190 | * 2.3.0 - Emit stats.compilation.errors as `error` (@JakeChampion).
|
191 | * 2.2.0 - Add support for source maps (@OliverJAsh).
|
192 | * 2.1.0 - Avoid modifying options by reference (@shinuza). Replace log with correct package name (@vinnymac).
|
193 | * 2.0.0 - Rename to webpack-stream and now it's totally not a gulp plugin.
|
194 | * 1.5.0 - Update webpack to 1.9.x (@nmccready). Update other dependencies.
|
195 | * 1.4.0 - Update webpack to 1.8.x (@Zolmeister).
|
196 | * 1.3.2 - Fix another place with ? in name (@raphaelluchini).
|
197 | * 1.3.1 - Fix for paths with ? in their name (@raphaelluchini).
|
198 | * 1.3.0 - Updating to webpack >= 1.7.
|
199 | * 1.2.0 - Updating to webpack >= 1.5, vinyl >= 0.4, memory-fs >= 0.2.
|
200 | * 1.1.2 - Fixes to default stats for logging (@mdreizin).
|
201 | * 1.1.1 - Add additional stats to default logging (@mdreizin).
|
202 | * 1.1.0 - Exposes internal webpack if asked via `require('webpack-stream').webpack`
|
203 | * 1.0.0 - Support named chunks pipe'd in for multiple entry points.
|
204 | * 0.4.1 - Fixed regression for multiple entry point support.
|
205 | * 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).
|
206 | * 0.3.0 - Update deps (@kompot). Fixes to determining entry (@btipling and @abergs).
|
207 | * 0.2.0 - Support for `watch` mode (@ampedandwired).
|
208 | * 0.1.0 - Initial release
|
209 |
|
210 | ## License
|
211 | Copyright (c) 2018 Kyle Robinson Young
|
212 | Licensed under the MIT license.
|