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'] } }] } };