webpack入門

標籤：預先載入   語言   項目   設定   gre   為什麼   輸出   伺服器   commons   

一、模組化：

1、什麼是模組化？

　　就是將一個個檔案看做一個個模組，模組之間互不影響，主要針對的是js檔案。

2、為什麼會產生模組化的思想？

原始的一個個js檔案 都是在html中通過<script stc=‘xxx.js‘>來引入，當js檔案很多時會產生很多問題：

（1）、變數之間的汙染衝突。

（2）、因為瀏覽器是按js檔案引入的順序載入，而且會在一些js檔案使用了其他js檔案的方法、變數或者調用引入外掛程式方法等等，這些都需要我們人工調整載入順序。

（3）、時間太長後，代碼維護管理困難。

（4）、這樣引入造成代碼結構不清晰，冗餘

所以就產生了模組化的思想，我們設定一個入門檔案entry.js，通過module.exports 和 exports匯出模組介面，通過require()匯入模組，然後各個模組之間相互依賴調用，

最終我們在html檔案中只需引入一個entry.js檔案即可。

3、模組化實現基本原理：

每個模組中都存在三個自由變數require、module、exports，其中module和exports負責匯出模組介面，require負責匯入其他模組。

為了實現各個模組之間的獨立，我們會將每個檔案代碼使用立即執行函數包裹，將三個自由變數當做參數傳入。

module.export是一個對象，儲存著該模組要匯出的介面，且exports指向module.exports的 引用，我們為module.exports對象賦值或者添加屬性，最後通過return返回匯出介面。

其他模組通過require(‘filenamePath‘)方法引入擷取模組介面，基本原理就是讀取該模組檔案代碼然後執行，得到執行後的傳回值即是該模組介面，為了避免每次執行，一般都會設定緩衝機制。

4、模組化規範（CommomJs、AMD/CMD）

這些都是都是模組化開發的一些標準API。

註：js檔案可以非同步載入，但所有js檔案的執行一定是同步，也就是串列的，這是由於js單線程的特點決定的。

（1）、CommonJs

CommonJs主要定義一的是伺服器端的一些API，該模組是通過reqire同步記載模組（載入執行完一模組後，才繼續下一個），然後通過moduel.exports或exports匯出模組介面。

瀏覽器用戶端要求 效率速度，一般都是非同步載入資源，所以CommonJs不適用用戶端。

CommonJs的主要實現是nodejs。

（2）、AMD/CMD

AMD和CMD也是模組化規範，和CommonJs不同的是，它們是非同步載入模組，也就是在載入某個模組的時候，還可以並行載入其他模組並執行。

但是AMD和CMD也有一些區別：

　　AMD是預先載入，在載入js檔案模組同時，還會解析執行該模、（正因為要執行，所以在載入某個模組前，該模組的所有相依模組都要載入完畢，為該模組執行做準備）

　   CMD是懶載入（按需載入），非同步載入模組，但並不會執行，僅在需要時才執行。

優缺點：

　　AMD因為一邊載入一邊執行，所以載入效率高，但是載入順序不一定順序不受控制。

　　CMD載入順序可控，但是因為模組不是提前執行完畢，且js執行時串列的，所以所需時間較長。

二、webpack介紹：

webpack是模組打包器，webpack從入口檔案開始整個項目結構，找到JavaScript模組和一些瀏覽器不能直接識別啟動並執行，按照指定規則將其打包為合適的格式到出口檔案。

webpack是在其他模組打包管理工具的功能上發展出來的更具優勢的工具。

三、webpack優點

（1）、webpack為我們提供了基於CommonJS模組化開發環境，可以直接使用CommonJS規範開發，webpack會將其打包為瀏覽器可識別啟動並執行檔案。

（2）、webpack本身只能處理JavaScript模組，但是我們通過loader轉換器，將各種類型資源轉換為JavaScript模組處理，這樣來說，任何類型模組webpack都可以處理，

我們還可以使用瀏覽器不能識別的JavaScript語言新特性。

（3）、webpack可以檢測js檔案變化，自動將其打包為合適格式的出口檔案。

（4）、webpack具有智能解析器，幾乎可以處理任何第三方庫。

（5）、豐富的外掛程式系統，來滿足各種需求。

四、webpack使用：

使用前我們要安裝nodejs，我們使用nodejs帶npm來進行包管理。

1、安裝：

（1）、執行命令全域安裝webpack

npm install webpack -g

 

（2）、建立一個專案檔夾，在該檔案下執行命令 ，一路斷行符號，產生package.json，進行包管理

npm init

 

（3）、在該項目目錄下執行命令本地安裝：

npm install webpack --save-dev

 

 

（4）、執行命令安裝開發工具，執行webpack-dev-server，會自動建立一個本機伺服器，我們在瀏覽器輸入localhost:8080/html的檔案名稱（預設為index.html）可訪問

npm install webpack-dev-server --save-dev

 

2、簡單用法：

在專案檔夾中建立index.html檔案 和 entry.js檔案，然後在index.html檔案中使用<script src>引入bundle.js

我們在命令列的項目目錄下執行 webpack entry.js bundle.js ，如果沒有報錯，訪問該index.html檔案即可看到index.js中代碼執行的結果（這個測試代碼隨意）

文法是： wepack 入口檔案路徑 出口檔案路徑 [--module-bind ‘載入的loader‘]

後面的loader就是用來處理非js檔案模組和瀏覽器不能識別的js新特性模組，使用前需要使用npm install下載，比如css-loader解析css模組的loader 

npm install css-loader --save-dev

 

3、設定檔：

我們將入口檔案路徑、出口檔案路徑、載入的loader、載入的外掛程式等寫到設定檔裡，然後就省去了命令列的長命令，直接執行 webpack 即可打包。

// 引入path模組處理路徑var path = require(‘path‘);// 引入webpack模組，匯入全域掛載外掛程式var webpack = require(‘webpack‘);// 引入CommonsChunkPlugin全域掛載外掛程式，提取公用代碼整合到common.js檔案中，然後我們需要在html檔案中手動引入，// 解決多個模組都引入同一模組，這樣該模組的冗餘度太高，所以提取公用代碼，直接放到html檔案中var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin(‘common.js‘)module.exports = {    // 入門檔案配置,path.join()路徑拼接，__dirname當前路徑    entry: path.join(__dirname, ‘src/js/entry.js‘),    // 出口檔案配置    output: {        // 出口路徑        path: path.join(__dirname, ‘bundle‘),        // 公用目錄        publicPath: ‘./bundle‘,        // 出口檔案名稱字        filename: ‘bundle.js‘    },    resolve: {        //指定可以被import的檔案名稱尾碼，import這些檔案的尾碼可以省略        extensions: [‘.js‘, ‘.jsx‘]    },    // 模組配置    module: {        // 引入的loader配置數組，loader使用前需要npm install 下載        loaders: [            // 匹配.js尾碼的檔案，使用babel-loader預先處理載入器處理            {test: /\.js$/, loader: ‘babel-loader‘},            // 匹配.css尾碼檔案，使用style-loader和css-loader處理            {test: /\.css$/, loader: ‘style-loader!css-loader‘},            // 匹配jpg和png圖片，使用url-loader處理，?後為向url-loader傳遞的參數，limit=8192 指的是圖片小於8KB，將圖片轉換為base64格式            {test: /\.(jpg|png)$/, loader: ‘url-loader?limit=8192‘},            {test: /\.less$/, loader: ‘style-loader!css-loader!less-loader‘}        ]    },    plugins: [        new CommonsChunkPlugin()    ]}

 

4、開發調試：

　（1）一些命令技巧：

   　一般的 webpack 一次性打包並不能滿足我們的要求。

　　我們可以使用 webpack -w 開啟監聽模式，沒有變化的模組緩衝到記憶體中，發生變化的模組重新編譯。

　　當然我們還可以使用 webpack-dev-server ,將會在localhost:8080啟動一個express的http靜態伺服器，並以監聽模式自動運行webpack，自動重新整理頁面，伺服器預設目前的目錄為項目目錄，我們輸入正確的路徑訪問html檔案即可。

　　如果項目過大，編譯時間較長，我們使用 --grogress --colors 讓輸出內容帶有進度和顏色，如下：

webpack -w --progress --colors

webpack-dev-server --progress --colors

 

 　　（2）、使用npm測試命令：

我們可以在package.json中調整scripts選項，如下：

 

---------------------------------------

 

webpack入門