一、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 //configuration
  4 }, 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的配置可以寫在配置文件中，通過正則表達式的方式對文件進行匹配，具體可參見下面的示例：

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