webpack和gulp结合

我们可以把gulp理解为工具，webpack理解为前端构建方案,两者结合达到更好的效果

安装
npm install gulp-webpack —save-dev
这是一个可以无比方便的关联gulp和webpack的插件

我们接下来设定一个需求
1、首先使用CommonJS规范编写代码
如： index.js=> var getlib=require(“slib”);

2、利用webpack 编译JS文件。
.pipe(gulpwebpack()) // 利用webpack编译_
3、编译好后用gulp压缩 .pipe(gulp_uglify())
注意：需要一次性完成，而不是敲两次命令

var gp=require("gulp");
var gulp_concat=require('gulp-concat'); //引用
var gulp_uglify=require('gulp-uglify');
var gulp_webpack=require("gulp-webpack");
gp.task('task1',done=>{
  //  gp.src(['*.js','!gulpfile.js']).pipe(gp.dest('./build/js'));  // 将除了gulpfile以外的所有js通过dest管道函数放到build/js里
   gp.src(['index.js'])    // 读取js
  .pipe(gulp_webpack())   // 利用webpack编译
  .pipe(gulp_uglify())   //压缩
  .pipe(gp.dest('./build/js'));   // 存到 build
   gp.src(['*.css']).pipe(gp.dest('./build/css'));  // 将所有css文件 通过dest管道函数放到build/css里
    done()
})

gulp task1运行发现最终生成的文件名不是可控，是随意生成了一个js文件。
其实有几点
1、没有加载配置文件
2、同时并没有调用我们上节课独立安装的webpack(请注意，gulp-webpack插件中有个webpack)，而是使用的gulp-webpack插件中的webpack。
事实上，项目开发中我们肯定是需要调用我们自己“独立”安装的webpack(版本可控)

第一种办法：
•依然只使用gulp-webpack
•但是我们需要传入一个配置文件对象•
•var webpack_config=require(“./webpack.config.js”);//这是webpack本身的配置 •
•gulp-webpack 第一个参数就是给你传配置的。具体请看视频操作•
•其中我们还需要修改一下webpack.config.js

var gulpwebpack=require(“gulp-webpack”); // 调用本地独立的webpack配置
.pipe(gulp_webpack(webpack_config)) // 利用webpack编译
.pipe(gp.dest(‘./build/js’)); // 存到 build _build会找不到，因为在gulp文件流里是没有build/js的，需要在webpack配置文件里加上 __dirname具体目录。

 output: {
        path: __dirname+'./build/js', //输出文件夹  __dirname 具体的文件路径
        filename:'build.js'  //最终打包生成的文件名
    }

第二种办法：使用我们独立安装的webpack**
•npm install -g webpack
•npm install webpack—save-dev
•(上节课我们是全局安装，这节课我们把它安装到项目目录中)•
•var webpack = require(‘webpack’); //引用•
•gulp_webpack(gulp_webpack_config,webpack) //webpack 使用外部的独立安装的webpack

var gp=require("gulp");
var gulp_concat=require('gulp-concat'); //引用
var gulp_uglify=require('gulp-uglify');
var gulp_webpack=require("gulp-webpack");
var webpack = require('webpack')
var webpack_config=require("./webpack.config");  // 调用本地独立的webpack配置
gp.task('task1',done=>{
  //  gp.src(['*.js','!gulpfile.js']).pipe(gp.dest('./build/js'));  // 将除了gulpfile以外的所有js通过dest管道函数放到build/js里
   gp.src(['index.js'])    // 读取js
  .pipe(gulp_webpack(webpack_config,webpack))   // 利用webpack编译,第一个参数使用webpack配置文件，第二个参数，使用外部的独立webpack
  .pipe(gulp_uglify())   //压缩
  .pipe(gp.dest('./build/js'));   // 存到 build
   gp.src(['*.css']).pipe(gp.dest('./build/css'));  // 将所有css文件 通过dest管道函数放到build/css里
    done()
})