沒有webpack的缺點:我們引入js標籤的問題:**量大時，可讀性不好
函式間依賴嚴重，維護性不好
協作開發，容易變數命名衝突
如果乙個script不好維護
當script標籤很多會有效能問題: 同步載入會阻塞，非同步載入瀏覽器網路請求只能載入6個js檔案
2. 作用域問題: 可能會導致全域性變數汙染
// add.js檔案
function
add(a,
b)function
display
(val
)// 該函式只想在add.js檔案內部使用 但是引入到html文件中，會被汙染
改進:使用立即執行函式，並暴露需要的方法
(
function
()function
display
(val
)window
.add
=add
;// 暴露方法
})()
問題:引入依賴的問題
方法執行之前要引入模組
<
script
>
add(1,
2)// 方法還沒引入就執行，報錯
math(1
,2)// 方法還沒引入就執行，報錯
<
/script>
<
script
src=
"./add.js"
><
/script>
<
script
src=
"./math.js"
><
/script>
在模組中包含其他模組: 必須要先引入其他模組，不然會報錯
// math.js檔案
(function
()window
.math
=math
;})()
解決: gulp grunt等工具
解決方式: 在模組中告訴需要先引入其他模組
/**
* add.js
*/// 在注釋中告訴要引入該模組之前引入上面的模組(使用工具後自動新增)
(function
()window
.math
=math
;})()
問題1: 我們修改了乙個檔案，可能就打破了依賴
問題2: dead code(只使用乙個方法，但會引入整個庫，佔空間；對比在webpack中，沒被引入的方法會自動刪除)
node commonjs: 只引入執行的方法，不會整個庫引入
使用方法: 從模組檔案匯出，匯入到入口檔案
匯出:add.js模組檔案
// add.js模組檔案
function
add(a,
b)function
display
(val
)module
.exports
=add
;// 匯出方法
匯入:入口檔案main.js
// 匯入檔案
varadd
=require
('../add'
)// 字尾自動識別
varmath
=require
('../math'
)// 字尾自動識別
add(1,
2)// 可以在node中直接執行
math(3
,4)// 可以在node中直接執行
問題:沒有瀏覽器的支援，直接引入會報錯: require is not defined
解決:打包工具 browerify (webpack之前的)
解決方式: 把./node/main.js檔案作為入口檔案，打包生成乙個檔案./dist/main.js（正常的js檔案），browerify會自動處理裡面變數衝突的問題，然後在html檔案中引入該js檔案即可。
問題: commonjs語法是靜態的
描述: 有些功能使用者僅需要按需載入，browerify會把所有js模組打包成乙個大大的js檔案，載入到html中的時候，會導致使用者在第一次載入的時候很慢(webpack還可以把這裡打包出來的檔案再進行分割（軟載入，自動處理）)
非同步載入js模組檔案（以過渡）
amd: require.js
使用陣列方式非同步載入js模組，但是模組依賴太嚴重會自動打包成很大的js檔案。
//my/shirt.js now has some dependencies, a cart and inventory
//module in the same directory as shirt.js
define
(["./cart"
,"./inventory"
],function
(cart
,inventory)}
});
cmd: sea.js(國內開發)
問題: 太動態 打包出來很膨脹
推出模組化標準：沒出標準之前有人使用amd，有人使用cmd，需要乙個機制來配合，出標準後不再需要處理這些。
問題:2023年才推出，以前的瀏覽器不支援。
解決方案: 需要在script type='module'
解決方案: 推出了webpack：
任意模組化的語法都支援
按需載入 非同步打包
工具的集合
模組化函式初探！
終於學到這了！之前乙個檔案裡堆滿了各種函式，難受死我了，終於能夠分成幾個檔案操作了。測試了下，大致如下 main.cpp define crt secure no warnings include include include test.h intmain void function.cpp in...
webpack之css模組化
前言 本文演示了 開啟css loader的模組化配置 當前專案目錄和package.json配置 如何使css模組化？需要在我們的webpack.config.js中對css loader進行一些額外設定。編輯main.css 執行 npm run dev 瀏覽器截圖如下 可以看出瀏覽器控制台列印...
webpack 及 模組化總結
通過 npm yarn 的方式來安裝 webpack 安裝方式 本地安裝 優勢 管理方便 易於復用 解決 專案開發過程中的衝突 依賴 基於amd的requirejs模組化庫 2.cmd common module definition cmd則是依賴就近。2 每乙個模組內宣告的變數都是區域性變數，不...