webpack-stream

最近实习了，自己的空余时间不是很多，文章产出也变少了。今天提前完成任务，恰逢要用到gulp的webpack-stream插件，今天就来翻译+学习一下如何使用它。

github的webpack-stream仓库地址：https://github.com/shama/webpack-stream

---

安装

使用npm安装：

npm install --save-dev webpack-stream

使用cnpm安装：

cnpm i --save-dev webpack-stream

---

用法

基本用法

var gulp = require('gulp');var webpack = require('webpack-stream');gulp.task('default', function() {  return gulp.src('src/entry.js')    .pipe(webpack())    .pipe(gulp.dest('dist/'));});

上述代码使用webpack编译 src/entry.js文件资源，并把文件输出到dist/的[hash].js（webpack生成的哈希值）输出文件中。

第一个参数

你可以在第一个参数设置webpack的选项。包括watch，这将会大大减少编译时间：

return gulp.src('src/entry.js')  .pipe(webpack({    watch: true,    module: {      loaders: [        { test: /\.css$/, loader: 'style!css' },      ],    },  }))  .pipe(gulp.dest('dist/'));

导入外部配置文件

或者导入你的webpack.config.js文件：

return gulp.src('src/entry.js')  .pipe(webpack( require('./webpack.config.js') ))  .pipe(gulp.dest('dist/'));

第二个参数

如果想要使用跟本插件不同版本的webpack，请输入第二个参数：

var gulp = require('gulp');var webpack = require('webpack');var gulpWebpack = require('webpack-stream');gulp.task('default', function() {  return gulp.src('src/entry.js')    .pipe(gulpWebpack({}, webpack))    .pipe(gulp.dest('dist/'));});

第三参数

如果你要在编译完成时访问从webpack输出的统计信息，请传入第三个参数：

var gulp = require('gulp');var webpack = require('webpack-stream');gulp.task('default', function() {  return gulp.src('src/entry.js')    .pipe(webpack({      /* config */    }, null, function(err, stats) {      /* Use stats to do more things if needed */    }))    .pipe(gulp.dest('dist/'));});

多个入口

一个常见的要求是如何处理多个入口点。你可以输入entry选项在你典型webpack配置中传递选项，就像下面这样：

var gulp = require('gulp');var webpack = require('webpack-stream');gulp.task('default', function() {  return gulp.src('src/entry.js')    .pipe(webpack({      entry: {        app: 'src/app.js',        test: 'test/test.js',      },      output: {        filename: '[name].js',      },    }))    .pipe(gulp.dest('dist/'));});

或者通过命名块的流管道文件（Or pipe files through a stream that names the chunks）。一个便利的插件库是：vinly-named

var gulp = require('gulp');var webpack = require('webpack-stream');var named = require('vinyl-named');gulp.task('default', function() {  return gulp.src(['src/app.js', 'test/test.js'])    .pipe(named())    .pipe(webpack())    .pipe(gulp.dest('dist/'));

上面的named()流将会通过vinyl文件添加一个.name属性。webpack()流将会读取它们作为入口点，甚至将具有共同名字的入口点组合在一起。

源映射（Source Maps）

源映射内置到webpack中，指定一个devtool：

var gulp = require('gulp');var webpack = require('webpack-stream');var named = require('vinyl-named');gulp.task('default', function() {  return gulp.src(['src/app.js', 'test/test.js'])    .pipe(named())    .pipe(webpack({      devtool: 'source-map'    }))    .pipe(gulp.dest('dist/'));});

现在合适的.map文件将被发射。或者设置为inline-source-map 将源映射内联到文件中。

如果需要对源映射进行进一步的特殊处理，比如使用 gulp-sourcemaps，那么只需将其传递给一个流并处理webpack发出的源地图文件：

var gulp = require('gulp');var webpack = require('webpack-stream');var named = require('vinyl-named');var through = require('through2');var sourcemaps = require('gulp-sourcemaps');gulp.task('default', function() {  return gulp.src(['src/app.js', 'test/test.js'])    .pipe(named())    .pipe(webpack({      devtool: 'source-map'    }))    .pipe(sourcemaps.init({loadMaps: true}))    .pipe(through.obj(function (file, enc, cb) {      // Dont pipe through any source map files as it will be handled      // by gulp-sourcemaps      var isSourceMap = /\.map$/.test(file.path);      if (!isSourceMap) this.push(file);      cb();    }))    .pipe(sourcemaps.write('.'))    .pipe(gulp.dest('dist/'));});

多编译器支持

支持多个编译器，但不是直接传递webpack配置，你必须将其封装在config键下的对象中。

var gulp = require('gulp');var webpack = require('webpack-stream');gulp.task('default', function() {  return gulp.src('src/entry.js')    .pipe(webpack({      config : require('./webpack.config.js')    }))    .pipe(gulp.dest('dist/'));});