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/'));
});