webpack和gulp"勾结"初步

要结合gulp和webpack同样有个插件

npm install gulp-webpack --save-dev

1.gulpfile.js

var gp = require('gulp'); var uglify = require('gulp-uglify'); var webpack = require('gulp-webpack'); var webpack_config = require('./webpack.config.js'); gp.task("taskName",function(){ gp.src(['zhangsan.js']) .pipe(webpack(webpack_config)) .pipe(uglify()) .pipe(gp.dest('./build/js')); })

把zhagnsan.js进行依照webpack配置文件进行编译然后压缩，输出到build/js目录下。

2.执行命令 gulp taskName

3.webpack配置文件webpack.config.js如下：

module.exports = { // entry是入口文件，可以多个，代表要编译那些js entry:['xxx.js'], output:{ path: __diranme+'/build/js', // 输出到那个目录下（__diranme当前项目目录） filename:'build.js' //最终打包生产的文件名 }, };

上面我们用的是gulp-webpack，实际项目中，我们更多是要使用独立的webpack。

npm install webpack --save-dev

这样来安装到项目目录中 var webpack = require(‘webpack’); //引用 gulp_webpack(gulp_webpack_config,webpack)

var gp = require('gulp'); var uglify = require('gulp-uglify'); var gulp_webpack = require('gulp-webpack'); var webpack = require('webpack'); var webpack_config = require('./webpack.config.js'); gp.task("taskName",function(){ gp.src(['zhangsan.js']) .pipe(gulp_webpack(webpack_config,webpack)) .pipe(uglify()) .pipe(gp.dest('./build/js')); })