webpack入門指南-step03

標籤：彩色   遍曆   text   map   開發   輸出   regex   head   modules   

一、webpack 的使用

webpack簡單點來說就就是一個設定檔，所有的魔力都是在這一個檔案中發生的。 這個設定檔主要分為三大塊

• entry 入口檔案 讓webpack用哪個檔案作為項目的入口
• output 出口 讓webpack把處理完成的檔案放在哪裡
• module 模組 要用什麼不同的模組來處理各種類型的檔案

二、webpack 常用命令

webpack的使用和browserify有些類似，下面列舉幾個常用命令：

• webpack          最基本的啟動webpack命令
• webpack -w    提供watch方法，即時進行打封裝更新
• webpack -p    對打包後的檔案進行壓縮
• webpack -d    提供SourceMaps，方便調試
• webpack --colors     輸出結果帶彩色，比如：會用紅色顯示耗時較長的步驟
• webpack --profile   輸出效能資料，可以看到每一步的耗時
• webpack --display-modules   預設情況下 node_modules 下的模組會被隱藏，加上這個參數可以顯示這些被隱藏的模組

前面的四個命令比較基礎，使用頻率會比較大，後面的命令主要是用來定位打包時間較長的原因，方便改進設定檔，提高打包效率。

三、webpack的使用通常有三種方式

• 命令列使用：webpack <entry.js> <result.js> 其中entry.js是入口檔案，result.js是打包後的輸出檔案
• node.js API使用：

  1 var webpack = require(‘webpack‘);2 webpack({3 //configuration4 }, function(err, stats){});

• 預設使用目前的目錄的webpack.config.js作為設定檔。如果要指定另外的設定檔，可以執行：webpack --config webpack.custom.config.js

四、webpack 設定檔webpack.config.js

項目中靜態資源檔案較多，使用設定檔進行打包會方便很多。最簡單的Webpack設定檔webpack.config.js如下所示：

 1 module.exports = { 2   entry:[ 3     ‘./entry.js‘, 4     ... 5   ], 6   output: { 7     path: __dirname + ‘/output/‘, 8     publicPath: "/output/", 9     filename: ‘result.js‘10   }11 };

• 其中entry參數定義了打包後的入口檔案，數組中的所有檔案會打包產生一個filename檔案
• output參數定義了輸出檔案的位置及名字，其中參數path是指檔案的絕對路徑，publicPath是指訪問路徑，filename是指輸出的檔案名稱。

開發中需要將多個頁面的公用模組獨立打包，從而可以利用瀏覽器緩衝機制來提高頁面載入效率，減少頁面初次載入時間，只有當某功能被用到時，才去動態載入。這就需要使用webpack中的CommonsChunkPlugin外掛程式。具體配置如下：

1 var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin");2 module.exports = {3   entry: { a: "./a", b: "./b" },4   output: { filename: "[name].js" },5   plugins: [ new CommonsChunkPlugin("common.js") ]6 }

在檔案中根據下面的方式引用即可。

1 <script src="common.js"></script>2 <script src="a.js"></script>3 <script src="b.js"></script>

五、webpack 模組載入器loader

在webpack中JavaScript，CSS，LESS，TypeScript，JSX，CoffeeScript，圖片等靜態檔案都是模組，不同模組的載入是通過模組載入器（webpack-loader）來統一管理的。loaders之間是可以串聯的，一個載入器的輸出可以作為下一個載入器的輸入，最終返回到JavaScript上。loader的配置可以寫在設定檔中，通過Regex的方式對檔案進行匹配，具體可參見下面的樣本：

loader也支援在js檔案中通過require的方式進行載入，只需要在require資源path的前面指定loader，用！來串聯不同的loader和資源即可。

webpack使用loader的方式來處理各種各樣的資源，比如說樣式檔案，我們需要兩種loader，css-loader 和 style－loader，css-loader會遍曆css檔案，找到所有的url(...)並且處理。style-loader會把所有的樣式插入到你頁面的一個style tag中。

使用前要先在webpack命令工具行中安裝我們的loader

 配置loader，在webpack.config.js中

看loaders的書寫方式，test裡麵包含一個正則，包含需要匹配的檔案，loaders是一個數組，包含要處理這些程式的loaders，這裡我們用了css和style，注意loaders的處理順序是從右至左的，這裡就是先運行css-loader然後是style-loader.

建立一個樣式檔案 main.css

記得在入口檔案index.js中引用

然後發現標題變成紅色的了，webpack的理念是基於項目處理的，把對應的檔案格式給對應的loader處理，然後你就不用管了，它會決定怎麼壓縮，編譯。

那現在想使用一些有愛的css先行編譯程式，來點sass吧。 你可能已經想到了，再來個loader就行啦，確實是這樣簡單。

更新 這裡還需要添加node-sass來解析sass檔案

稍微修改一下config，刪掉我們先前添加的css規則，加上下面的loader

添加兩個sass檔案，variables.scss和main.scss

variables.scss

main.scss

 

在index.js中引用

然後發現標題如願變紅，相當簡單吧。

 

六、css檔案獨立打包

在webpack中編寫js檔案時，可以通過require的方式引入其他的靜態資源，可通過loader對檔案自動解析並打包檔案。通常會將js檔案打包合并，css檔案會在頁面的header中嵌入style的方式載入頁面。但開發過程中我們並不想將樣式打在指令碼中，最好可以獨立產生css檔案，以外鏈的形式載入。這時extract-text-webpack-plugin外掛程式可以幫我們達到想要的效果。需要使用npm的方式載入外掛程式，然後參見下面的配置，就可以將js中的css檔案提取，並以指定的檔案名稱來進行載入。

七、圖片打包

webpack中對於圖片的處理，可以通過url-loader來實現圖片的壓縮。它可以根據你的需求將一些圖片自動轉成base64編碼的，為你減輕很多的網路請求。

安裝url-loader

npm install url-loader --save-dev

配置config檔案

      {        test: /\.(png|jpg)$/,        loader: ‘url?limit=40000‘      }

注意後面那個limit的參數，當你圖片大小小於這個限制的時候，會自動啟用base64編碼圖片。

針對上面的兩種使用方式，loader可以自動識別並處理。根據loader中的設定，webpack會將小於指點大小的檔案轉化成 base64 格式的 dataUrl，其他圖片會做適當的壓縮並存放在指定目錄中。

對於上面的配置，如果圖片資源小於10kb就會轉化成 base64 格式的 dataUrl，其他的圖片會存放在build/檔案夾下。

 

八、webpack-dev-server 靜態資源伺服器

webpack除了可以對模組進行打包，還提供了一個程式開發伺服器。它的特點是：

• 基於Node.js Express架構的輕量程式開發伺服器
• 靜態資源Web伺服器
• 開發中會監聽檔案的變化在記憶體中即時打包

webpack-dev-server需要單獨安裝，命令如下：

可以使用webpack-dev-server直接啟動，也可以增加參數來擷取更多的功能，具體配置可以參見官方文檔。預設啟動連接埠8080，通過localhost:8080/webpack-dev-server/可以訪問頁面，檔案修改後儲存時會在頁面頭部看到sever的狀態變化，並且會進行熱替換，實現頁面的自動重新整理。

 

九、雙伺服器模式

項目開發中，僅有一台靜態伺服器是不能滿足需求的，我們需要另啟一台web伺服器，且將靜態伺服器整合到web伺服器中，就可以使用webpack的打包和載入功能。我們只需要修改一下設定檔就可以實現伺服器的整合。

如果在開發中啟動兩個伺服器並不是一個很好地選擇，webpack提供了一個中介軟體webpack-dev-middleware，但其只能在生產環境中使用，可以實現在記憶體中即時打包產生虛擬檔案，供瀏覽器訪問以及調試。使用方式如下：

 

十、添加第三方庫

有的時候還想來點jquery，moment，undersocre之類的庫，webpack可以非常容易的做到這一點，有謠言說Bower即將停止開發了, 作者推薦都使用npm來管理依賴。那麼我們現在安裝在我們的app中添加jquery和moment的支援。

npm install jquery moment --save-dev

在js中引用

看看瀏覽器，成功！ jquery和moment現在都起作用了！

十一、添加ES6的支援

如果現在你的項目還沒有對ES6的文法支援，那就有點沒有逼格了，其實大家都知道這個也很簡單，因為我們有偉大的Babel

首先 裝各種loader

npm install babel-loader babel-preset-es2015 --save-dev

配置我們的config檔案

es2015這個參數是babel的plugin，可以支援各種最新的es6的特性，具體的情況看這個連結。 Babel es2015 plugin

現在我們可以改掉CommonJS風格的檔案了。

sub.js

index.js

我們上面測試了import, export，const，let，promise等一系列es6的特性。

最後完美的輸出介面。

webpack入門指南-step03