Gulp and Webpack-stream Integrated configuration

Webpack is very powerful, but there are deficiencies, batch processing is still gulp better. Can we combine the advantages of both? This article explains how to integrate gulp and Webpack

1. Installing Webpack-stream

Very important plug-ins, of course, can also directly use the official Webpack, integrated way can see Webpack official website. But Webpack-stream is more consistent with Gulp's streaming syntax.

install --save webpack-stream vinyl-named

Windows users remove sudo, vinyl-named is used to keep the input and output the same file name, otherwise it will automatically generate a hash.

2. Writing the configuration file: 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

Note: You do not need to configure entry and output with Webpack-stream

Module.exports = {Watchtrue, Devtool:  "Source-map",  resolve: { extensions: [ ",  JS ',  '. Jsx ']}, module: { test:/\.jsx$/, loader:  query: { presets: [ Es2015 ',  ' React '}}, { test:/\.js$/, Loader:  ' Babel-loader ',  query: { presets : [ ' es2015 ']}}]}};           

Gulp and Webpack-stream integration configuration