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‘]
}
}]
}
};
时间: 2024-10-05 09:28:35