《nodejs+gulp+webpack基礎實戰篇》課程筆記（三）--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的插件

　　接着，我們來測試下：老規矩，老師設計一個需求，1、首先使用CommonJS規范編寫代碼 2、利用webpack 編譯JS文件。 3、編譯好后用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'));
});

　　然后我們測試后，發現最終生成的文件名不是可控的。說明1、沒有加載配置文件 2、同時並沒有調用我們上節課獨立安裝的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基礎實戰篇》課程筆記（四）-- 實戰演練