好用的打包工具webpack

<什麼是webpack>

webpack是一個模塊打包器，任何靜態資源（js、css、圖片等）均可以視做模塊，而後模塊之間也能夠相互依賴，經過webpack對模塊進行處理後，能夠打包成咱們想要的靜態資源。

gulp的打包是將js、css、圖片等分開打包的，可是webpack是將全部的靜態資源打包到一塊兒，所以一個請求就能夠了。

<webpack的特色>

·支持CommonJs（require的寫法）和AMD模塊，也就是說基本能夠無痛遷移舊項目

·支持模塊加載器和插件機制，可對模塊靈活定製，特別是babel-loader,有效支持es6

·能夠經過配置，打包成多個文件。有效利用瀏覽器的緩存功能提高性能。將公用的東西抽離出來，好比jQuery等

·將樣式文件和圖片等靜態資源視爲模塊進行打包。配合loader加載器，支持sass、less等css預處理器

·內置有source map,即便打包在一塊兒也方便調試

<webpack的安裝>

1，先全局安裝

npm install webpack -g

·webpack -w  提供watch方法，實時進行打包更新

·webpack -p 對打包後的文件進行壓縮

·webpack -d 提供sourcemap,方便調試

·webpack --config 以某個config做爲打包

·webpack --help 更多命令

2，再本地安裝

npm init 先初始化一下，生成package.json。再安裝，這樣能夠方便的查看依賴的文件

npm install webpack --save-dev 開發式依賴，一些打包工具，像gulp、webpack等都是開發式依賴，上線時並不須要

<webpack初體驗>

好比說全部的文件打包到bundle.js中，則要在頁面中引入bundle.js

webpack ./entry.js bundle.js   //編譯entry.js並打包到bundle.js

<模塊依賴>

·webpack會分析入口文件，解析包含依賴關係的各個文件

·這些文件（模塊）都打包到bundle.js文件中

·webpack會給每一個模塊分配一個惟一的id並經過這個id索引和訪問模塊

·頁面啓動時先執行entry.js代碼，其餘的模塊會在require時懶加載

<loader加載器>

·webpack自己只能處理JavaScript模塊，若是要處理其餘類型的文件，就須要使用loader進行轉換

·Loader能夠理解爲是模塊和資源的轉換器，能夠轉換任何類型（jsx、jade等）的模塊

·Loader能夠經過管道方式鏈式調用，每一個loader能夠把資源轉換成任意格式並傳遞給下一個loader，可是最後一個loader必須返回JavaScript，由於webpack只認識js。不一樣的文件，使用的loader也不同

·Loader能夠接受參數，以此來傳遞配置項給loader。

·Loader能夠經過npm安裝

·Loader能夠經過文件擴展名（或正則表達式）綁定不一樣的加載器

<加載css文件>

安裝兩個loader:npm install css-loader style-loader

·首先將style.css也看做一個模塊

·用css-loader來讀取它

·用style-loader把它內嵌到html中

在entry.js中引入：

require("css!./style.css")//至關於require("css-loader!.style.css").由於css-loader的-loader是固定的，因此通常省略-loader。
/*將原始的css經過css-loader讀出來，須要傳遞給style-loader。因此該require還須要補充爲以下所示：*/
require("style!css!./style.css")
//!至關於gulp中的流同樣，從右向左依次流動

再次執行

webpack ./entry.js bundle.js   
編譯entry.js引入的樣式文件打包到bundle.js

 <加載圖片url-loader>

url-loader會將樣式中引用到的圖片轉爲模塊來處理

npm install url-loader

limit的參數意思是圖片大小小於這個限制的時候，會自動啓用base64編碼圖片

<配置文件>

·webpack在執行的時候能夠經過指定的配置文件

·默認狀況下會執行當前目錄中的webpack.config.js，當輸入webpack時，會自動尋找該文件。

·配置文件是一個node.js模塊，返回一個json格式的配置信息對象

·添加配置文件，而後執行webpack --progress --colors就能夠了

配置文件格式爲：

var webpack = require("webpack")
module.exports = {
 entry:"./entry.js",//指定打包的入口文件，每一個鍵值對，就是一個入口文件。
 output:{//配置打包結果
            path:__dirname,//定義了輸出的文件夾
            filename:"bundle.js"//定義了打包結果文件的名稱
 },
 module:{//定義了模塊的加載邏輯
         loaders:[//定義了一系列的加載器
             {test:/\.css$/,loader:"style!css"},//當須要加載的文件匹配`test`的正則時，就會使用相應的loader
　　　　　　　　{test:/\.(png|jpg)$/,loader:"url?limit=40000"},
　　　　　　　　{test:/\.js?$/,loader:"babel",exclude:/node_modules/,query:{compact:false,presets:['es2015']}}//對於全部的js文件，用babel-loader
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//進行加載，忽略node_modules下面
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//　的js文件。query表示參數，至關於
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//　url-loader的？形式。
         ]
 },
 plugins:[//插件的使用通常在webpack配置信息plugins選項中指定，咱們能夠向生成的打包文件頭部插入一些信息
 　　new webpack.BannerPlugin("//叮呤在學習webpack"),//向打包以後的文件頭部添加註釋信息
　　 new webpack.optimize.CommonChunkPlugin("common.js")//把多個模塊中的公共部分，單獨提取出來，單獨加載
 ],
 resolve:{
     alias:{//別名，它的做用是把用戶的一個請求重定向到另外一個路徑
    　　　　jquery:"./js/jquery.js" //這樣，在使用jQuery的組件中只須要require("jquery")便可，而再也不須要逐級去尋找jQuery的存放位置
     }
 }
}

　　·expose，若是想在前臺使用打包的jQuery，須要把jQuery暴露出來，先安裝該模塊 npm install expose-loader --save-dev

　　eg:把$做爲別名爲jquery的變量暴露到全局上下文中require("expose?$!jquery")，在引入jquery的時候，把jQuery對象綁定到window的$上面

　　·entry屬性可使一個對象，而對象名也就是key，會做爲下面output的filename屬性的name

　　entry:{

　　　　bundle1:"./entry1.js",

　　　　bundle2:"./entry2.js"

　　}

　　output:{

　　　　path:__dirname,

　　　　filename:"[name].js"//此處的[name]就表示bundle1和bundle2

　　}

　　假如bundle1和bundle2都包含有功能相同的部分，則能夠把這部分提取出來

　　·公共模塊。咱們利用插件能夠智能的提取公共部分，以提供咱們瀏覽器的緩存複用

　　plugins:[

　　　　　　new webpack.optimize.CommonChunkPlugin("common.js")//把多個模塊中的公共部分，單獨提取出來，單獨加載

　　　　　　]

　　咱們須要手動在html上加載common.js,而且是必須最早加載

 <使用es6>

 npm install babel-core --save-dev

npm install babel-loader --save-dev

npm install babel-preset-es2015

<webpack-dev-server>

npm install webpack-dev-server -g

安裝好以後，執行webpack-dev-server，在當前目錄啓動一個express服務，會自動打包和實時刷新

<與webpack相比gulp的優點>

webpack不能夠作自動部署和代碼檢查，webpack只是個打包工具。因此能夠採用gulp與webpack混合使用的方法

var gutil = require("gulp-util");
var webpack = require("webpack");
var webpackConfig = require("./webpack.config.js");
gulp.task("webpack",function(callback){
   var myConfig = Object.create(webpackConfig);
   webpack(myConfig,function(err,stats){
      callback();
   }) 
})
gulp.task("default",function(){
　　gulp.watch("./**",["webpack"]);
})