webpack原理與實戰

webpack是乙個js打包工具，不乙個完整的前端構建工具。它的流行得益於模組化和單頁應用的流行。webpack提供擴充套件機制，在龐大的社群支援下各種場景基本它都可找到解決方案。本文的目的是教會你用webpack解決實戰中常見的問題。

在深入實戰前先要知道webpack的執行原理

從啟動webpack構建到輸出結果經歷了一系列過程，它們是：

解析webpack配置引數，合併從shell傳入和webpack.config.js檔案裡配置的引數，生產最後的配置結果。

註冊所有配置的外掛程式，好讓外掛程式監聽webpack構建生命週期的事件節點，以做出對應的反應。

從配置的entry入口檔案開始解析檔案構建ast語法樹，找出每個檔案所依賴的檔案，遞迴下去。

在解析檔案遞迴的過程中根據檔案型別和loader配置找出合適的loader用來對檔案進行轉換。

遞迴完後得到每個檔案的最終結果，根據entry配置生成**塊chunk。

輸出所有chunk到檔案系統。

需要注意的是，在構建生命週期中有一系列外掛程式在合適的時機做了合適的事情，比如uglifyjsplugin會在loader轉換遞迴完後對結果再使用uglifyjs壓縮覆蓋之前的結果。

通過各種場景和對應的解決方案讓你深入掌握webpack

demo redemo乙個單頁應用需要配置乙個entry指明執行入口，webpack會為entry生成乙個包含這個入口所有依賴檔案的chunk，但要讓它在瀏覽器裡跑起來還需要乙個html檔案來載入chunk生成的js檔案，如果提取出了css還需要讓html檔案引入提取出的css。web-webpack-plugin裡的webplugin可以自動的完成這些工作。

webpack配置檔案

const  = require('web-webpack-plugin');
module.exports = ,
plugins: [
// 乙個webplugin對應生成乙個html檔案
new webplugin(),
],};

requires: ['doc']指明這個html依賴哪些entry，entry生成的js和css會自動注入到html裡。你還可以配置這些資源的注入方式，支援如下屬性：

要設定這些屬性可以通過在js裡配置

module.exports = function (content) ;

loader的入口需要匯出乙個函式，這個函式要幹的事情就是轉換乙個檔案的內容。函式接收的引數content是乙個檔案在轉換前的字串形式內容，需要返回乙個新的字串形式內容作為轉換後的結果，所有通過模組化倒入的檔案都會經過loader。從這裡可以看出loader只能處理乙個個單獨的檔案而不能處理**塊。想編寫更複雜的loader可參考官方文件

demo end-webpack-pluginplugin應用場景廣泛，所以稍微複雜點。以end-webpack-plugin為例：

class endwebpackplugin 
// 監聽webpack生命週期裡的事件，做相應的處理
compiler.plugin('done', (stats) => );
compiler.plugin('failed', (err) => );
}}module.exports = endwebpackplugin;

compiler和compilation都會廣播一系列事件。 webpack生命週期裡有非常多的事件可以在event-hooks和compilation里查到。以上只是乙個最簡單的demo，更複雜的可以檢視 how to write a plugin或參考web-webpack-plugin。

webpack原理與實戰

webpack原理與實戰

LightGBM介紹原理與實戰

專案實戰 webpack的搭建

webpack原理與實戰

webpack原理與實戰

LightGBM介紹 原理與實戰

專案實戰 webpack的搭建

相關推薦

LightGBM介紹原理與實戰