提高系列 webpack相關知識

這次我們主要研究的是webpack框架的相關知識，webpack是乙個打包構建的前端框架，用於解決前端開發的模組化問題。

說到webpack，肯定你還會想到gulp和grunt這些框架，那麼webpack是做什麼的呢？他和其他的框架有什麼區別呢？我們一起來分析一下。

在這一段落中我們主要對webpack和gulp進行縱向的比較分析：

webpack的根本任務是進行打包，把在乙個檔案中引用的另外乙個檔案，都打包在一起。

gulp根本任務是實現自動化，其實我們自己可以寫一段node指令碼實現所有js檔案的壓縮。gulp就是封裝好指令碼來幫我們做這些事

還有：webpack其實也可以實現js檔案的壓縮，但是這只不過是在完成打包任務的大背景下，所完成的額外任務

那麼使用場景呢？我在什麼情況下該用webpack，我在什麼情況下該用gulp，筆者認為，這就仁者見仁智者見智了，如果說，你就是在開發工程中為了打包，為了模組化，那麼你一定要用webpack啊，還有你希望實現解析sass直接放入html中，那麼這可以用webpack實現，在打包的過程中就順手完成了。但是，你初次之外，還想實現，在上線構建的時候，把上傳cdn並且替換鏈結，那麼你就需要額外引入gulp。webpack和gulp都有自己的長處和短處，分析好這兩個框架，你就可以在使用過程中如魚得水。

基本配置項。我們首先說說如何定義基本配置項，第一是我們可以shell的方式，定義配置，都寫在命令列上，但是這種方式不好，配置項一多，執行的命令就特別長。因此我們一般採用的都是配置檔案的方式。

const path = require('path'); module.exports = , // 如何輸出結果：在 webpack 經過一系列處理後，如何輸出最終想要的**。 output: , // 配置模組相關 module: }] },], noparse: [ // 不用解析和處理的模組 /special-library\.js$/ // 用正則匹配 ],}, // 配置外掛程式 plugins: [ ],// 配置尋找模組的規則 resolve: , alias: [ // alias 還支援使用陣列來更詳細的配置 ],symlinks: true, // 是否跟隨檔案軟鏈結去搜尋模組的路徑 descriptionfiles: ['package.json'], // 模組的描述檔案 mainfields: ['main'], // 模組的描述檔案裡的描述入口的檔案的欄位名稱 enforceextension: false, // 是否強制匯入語句必須要寫明檔案字尾 },// 輸出檔案效能檢查配置 performance: },devtool: 'source-map', // 配置 source-map 型別 context: __dirname, // webpack 使用的根目錄，string 型別必須是絕對路徑 // 配置輸出**的執行環境 target: 'web', // 瀏覽器，預設 target: 'webworker', // webworker target: 'node', // node.js，使用 `require` 語句載入 chunk ** target: 'async-node', // node.js，非同步載入 chunk ** target: 'node-webkit', // nw.js target: 'electron-main', // electron, 主線程 target: 'electron-renderer', // electron, 渲染執行緒 externals: , stats: , devserver: , contentbase: path.join(__dirname, 'public'), // 配置 devserver http 伺服器的檔案根目錄 compress: true, // 是否開啟 gzip 壓縮 historyapifallback: true, // 是否開發 html5 history api 網頁 hot: true, // 是否開啟模組熱替換功能 https: false, // 是否開啟 https 模式 },profile: true, // 是否捕捉 webpack 構建的效能資訊，用於分析什麼原因導致構建效能不佳 cache: false, // 是否啟用快取提公升構建速度 watch: true, // 是否開始 watchoptions: ,

}

以上我們就是webpack中大部分的配置項，其實我們可以發現，最重要四個是entry、output、loader和plugin分別代表入口，出口，載入器和外掛程式。具體的配置資訊和其他的配置項就不一一介紹了。

建議大家看一下webpack的官方文件，具體了解一下每乙個配置項的含義，就算都記不下來，也最好有點印象。

首先我們看一下webpack的整體原理：

初始化引數：從配置檔案和 shell 語句中讀取與合併引數，得出最終的引數；

開始編譯：用上一步得到的引數初始化 compiler 物件，載入所有配置的外掛程式，執行物件的 run 方法開始執行編譯；

確定入口：根據配置中的 entry 找出所有的入口檔案；

編譯模組：從入口檔案出發，呼叫所有配置的 loader 對模組進行翻譯，再找出該模組依賴的模組，再遞迴本步驟直到所有入口依賴的檔案都經過了本步驟的處理；

完成模組編譯：在經過第4步使用 loader 翻譯完所有模組後，得到了每個模組被翻譯後的最終內容以及它們之間的依賴關係；

輸出資源：根據入口和模組之間的依賴關係，組裝成乙個個包含多個模組的 chunk，再把每個 chunk 轉換成乙個單獨的檔案加入到輸出列表，這步是可以修改輸出內容的最後機會；

輸出完成：在確定好輸出內容後，根據配置確定輸出的路徑和檔名，把檔案內容寫入到檔案系統。

然後我們再看一下webpack中plugin的原理

plugins: [
function () ))
})})
}]

css-loader中importloaders=1引數的問題

問題是載入的css檔案中import了乙個css檔案，雖然可以被引入最後的html中，但是引入的css未經過postcss的處理，因此加上了這個，就ok了

mac平台和windows平台的差異導致的問題

// 配置entry選項時：
entry: 
// /和\的問題
const path = require('path');
const entrypath = path.resolve(__dirname, '/src/index.js');
entry:

不能滿足業務需求，自定義plugin的經過

如上縮小查詢檔案的範圍

利用loader中的exclude和include。

利用reslove中的moudules，這個可以在require時指明存放第三方模組的路徑。

利用動態鏈結庫

利用外掛程式dllplugin，可以打包出乙個個單獨的動態鏈結庫檔案。原因在於包含大量復用模組的動態鏈結庫只需要編譯一次，在之後的構建過程中被動態鏈結庫包含的模組將不會在重新編譯，而是直接使用動態鏈結庫中的**。

開啟打包編譯多程序提取公共**

利用commonschunkplugin外掛程式提取公共**。

提高系列 webpack相關知識

提高webpack打包速度

webpack相關配置

webpack相關配置

提高系列 webpack相關知識

提高webpack打包速度

webpack相關配置

webpack相關配置

相關推薦