《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基礎實戰篇》課程筆記（四）-- 實戰演練