gulp与webpack-stream集成配置

 

webpack非常强大,但是也有不足的地方,批量式处理依然是gulp更胜一筹.我们是否可以将两者的优点结合起来呢? 这篇文章就是讲述如何集成gulp和webpack

1.安装webpack-stream

很重要的插件,当然也可以直接使用官方的webpack,集成方式可以看webpack官网. 但webpack-stream更符合gulp的流语法.

sudo npm install --save webpack-stream vinyl-named

windows用户去掉sudo, vinyl-named用来保持输入和输出的文件名相同, 否则会自动生成一个hash.

2.配置文件的编写:

gulpfile.js

var gulp = require('gulp');
var webpack = require('webpack-stream'); var named = require('vinyl-named'); var webpackConfig = require("./webpack.config.js"); gulp.task('webpack', function() { return gulp.src('./www/src/main.jsx') .pipe(named()) .pipe(webpack(webpackConfig)) .pipe(gulp.dest('./www/build/')); }); 

webpack.config.js

注意:用webpack-stream不需要配置entry和output

module.exports = {
    watch: true,
    devtool: "source-map",
 resolve: {  extensions: ['', '.js', '.jsx'] },  module: {  loaders: [{  test: /\.jsx$/,  loader: 'babel-loader',  query: {  presets: ['es2015', 'react'] } }, {  test: /\.js$/,  loader: 'babel-loader',  query: {  presets: ['es2015'] } }] } };

webpack非常强大,但是也有不足的地方,批量式处理依然是gulp更胜一筹.我们是否可以将两者的优点结合起来呢? 这篇文章就是讲述如何集成gulp和webpack

1.安装webpack-stream

很重要的插件,当然也可以直接使用官方的webpack,集成方式可以看webpack官网. 但webpack-stream更符合gulp的流语法.

sudo npm install --save webpack-stream vinyl-named

windows用户去掉sudo, vinyl-named用来保持输入和输出的文件名相同, 否则会自动生成一个hash.

2.配置文件的编写:

gulpfile.js

var gulp = require('gulp');
var webpack = require('webpack-stream'); var named = require('vinyl-named'); var webpackConfig = require("./webpack.config.js"); gulp.task('webpack', function() { return gulp.src('./www/src/main.jsx') .pipe(named()) .pipe(webpack(webpackConfig)) .pipe(gulp.dest('./www/build/')); }); 

webpack.config.js

注意:用webpack-stream不需要配置entry和output

module.exports = {
    watch: true,
    devtool: "source-map",
 resolve: {  extensions: ['', '.js', '.jsx'] },  module: {  loaders: [{  test: /\.jsx$/,  loader: 'babel-loader',  query: {  presets: ['es2015', 'react'] } }, {  test: /\.js$/,  loader: 'babel-loader',  query: {  presets: ['es2015'] } }] } };