《nodejs+gulp+webpack基础实战篇》课程笔记（三）--webpack篇 《nodejs+gulp+webpack基础实战篇》课程笔记（四）-- 实战演练

webpack引入

　　前面咱们简单学习了gulp，这时一个前端构建框架---webpack产生了（模块打包） 它能帮咱们把原本须要在服务端运行的JS代码，经过模块的引用和依赖打包成前端可用的静态文件。（这里有须要了解一下CommonJS规范，具体请自行查看http://commonjs.org）。

　　安装webpack：

npm install -g wabpack  //这里咱们采用全局安装，保证每一个项目中都能使用到

　　设置配置文件：

　　  在项目目录下，新建一个webpack.config.js文件

module.exports=
{
    entry:[                     //entry是入口文件，能够多个，表明要编译哪些JS
        './xiaozu.js'
    ],
    output:{
        path:'./build/js',      //输出文件夹
        filename: 'build.js'    //最终打包生成的文件名
    }

}

　　OK ，而后咱们就能够运行测试下。这里测试我就省略了。

---

webpack和gulp"勾结"初步　

npm install gulp-webpack --save-dev
 //这是一个能够无比方便的关联gulp和webpack的插件

　　接着，咱们来测试下：老规矩，老师设计一个需求，一、首先使用CommonJS规范编写代码 二、利用webpack 编译JS文件。 三、编译好后用gulp压缩。注意：须要一次性完成，而不是敲两次命令 .

　　在gulpfile.js中引入

var gulp_webpack = require("gulp-webpack");

//gulpfile.js文件
var gp = require("gulp");
var gulp_concat = require("gulp-concat");
var gulp_uglify = require("gulp-uglify");
var gulp_webpack = require("gulp-webpack");
gp.task("xiaozu",function(){
    gp.src(['xiaozu.js'])
        .pipe(gulp_webpack())       //首先编译

        .pipe(gulp_uglify())        //压缩
        .pipe(gp.dest('./build/js'));


    gp.src(['*.css']).pipe(gp.dest('./build/css'));
});

　　而后咱们测试后，发现最终生成的文件名不是可控的。说明一、没有加载配置文件 二、同时并无调用咱们上节课独立安装的webpack(请注意，gulp-webpack插件中有个webpack)。这里们确定是须要调用咱们本身“独立”安装的webpack(版本可控)。

　　两种方式：第一种依然只使用gulp-webpack ，可是咱们须要传入一个配置文件对象。

var webpack_config=require(“./webpack.config.js”);
//这是webpack自己的配置 gulp-webpack 第一个参数就是给你传配置的。

　　其中咱们还须要修改一下webpack.config.js

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

　　第二种办法，使用咱们独立安装的webpack

//在gulpfile.js文件中引用
 var webpack = require(‘webpack’);   
//第一个参数传入配置文件，第二个参数是独立的webpack
gulp_webpack(gulp_webpack_config,webpack)

//如今gulpfile.js的内容
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.js");
gp.task("xiaozu",function(){
    gp.src(['xiaozu.js'])
        .pipe(gulp_webpack(webpack_config,webpack))       //传入参数，引入webpack的配置，再编译

        .pipe(gulp_uglify())        //压缩
        .pipe(gp.dest('./build/js'));


    gp.src(['*.css']).pipe(gp.dest('./build/css'));
});

　　版权声明：笔记整理者亡命小卒热爱自由，崇尚分享。可是本笔记源自www.jtthink.com（程序员在囧途）沈逸老师的《前端开发速学成财(nodejs+gulp+webpack基础实战篇)》。本学习笔记小卒于博客园首发， 如需转载请尊重老师劳动，保留沈逸老师署名以及课程来源地址    

上一课:《nodejs+gulp+webpack基础实战篇》课程笔记（二）--gulp速度上手

下一课：《nodejs+gulp+webpack基础实战篇》课程笔记（四）-- 实战演练