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