webpack4.29.x成神之路（一） webpack簡介

目錄

1、什麼是webpack

一般一個頁面，至少都會對應一個js文件、html文件和css文件，而這個js文件，咱們稱它爲入口文件。

webpack會分析入口文件的各類依賴關係，好比main.js中引入了什麼css、js、圖片？而依賴的某js文件中是否又依賴了其它的資源文件？這一系列複雜的依賴關係，webpack都會精準的幫咱們梳理好，而且打包編譯成最終線上代碼。

2、爲何要用webpack

在早期咱們每一個頁面都會以script標籤的形式，引入很是多的js腳本，如圖：

這些外部引入的庫會在window上掛本身的變量，這樣咱們在main.js中能夠直接使用它們的方法：

這樣作的壞處：
污染全局變量;
當js腳本過多且有依賴關係時，萬一引入順序錯誤將致使報錯

webpack最初就是爲了解決這個問題而誕生的一個模塊打包器。它對各類模塊化方案提供開箱即用般的支持。

有了模塊化，每一個js腳本都是一個封閉的模塊，在js中要用其餘模塊的方法前必須先引入才能使用， 這樣便可有效解決上述問題。

模塊化後的main.js大體像這樣：

現在webpack愈來愈成熟，除了解決模塊化問題，配合其餘插件能夠作到各工具語言的集成編譯和壓縮等，已經成爲前端自動化神器。

下節：起步