@文章來(lái)源：拉鉤大前端就業(yè)訓(xùn)練營(yíng)-念念

模塊化開(kāi)發(fā)及標(biāo)準(zhǔn)規(guī)范

模塊化

CommonJS 是以同步模式加載模塊
AMD 規(guī)范 require.js
- 使用起來(lái)相對(duì)復(fù)雜
- 模塊 JS 文件請(qǐng)求頻繁
ESmoudles 特性
- ESM 自動(dòng)采用嚴(yán)格模式，忽略'use strict'
- 每個(gè) ES module 都是運(yùn)行在單獨(dú)的私有作用域中
- ESM 是通過(guò) cors 的方式請(qǐng)求外部的 js 模塊的
- ESM 的 script 標(biāo)簽會(huì)延遲執(zhí)行腳本
ESmodule 導(dǎo)入導(dǎo)出
- export 導(dǎo)出
  - export 導(dǎo)出的不是對(duì)象字面量的簡(jiǎn)寫(xiě)
  - export default 導(dǎo)出的可以是對(duì)象字面量
- import xx from 'xx' 導(dǎo)入
  - 導(dǎo)出的是只讀的
  - 只能出現(xiàn)在最外層作用域
  - 使用全局的 import()返回一個(gè) promise
- ployfill -- ESmodule load
  - 引入腳本文件到頁(yè)面中
- node 使用 esmodule
  - 修改后綴名為 mjs
  - node --experimental-modules xx.mjs
ES module 載入 common.js 模塊
- ESmodule 可以載入 common.js 模塊成 commonjs 只能載入默認(rèn)成員，不能直接提取
新版本 package.json 添加 type:module
- 如果要使用 commonjs 規(guī)范修改 cjs
babel 實(shí)現(xiàn)兼容

模塊化帶來(lái)的問(wèn)題
- esmodules 存在環(huán)境兼容問(wèn)題
- 模塊文件過(guò)多，網(wǎng)絡(luò)請(qǐng)求頻繁
- 所以前端資源都需要模塊化

css-loader 將資源文件轉(zhuǎn)換為 js 工作
文件資源加載器 file-loader
webpack 工作模式
- 生產(chǎn)模式下，自動(dòng)優(yōu)化打包結(jié)果；
- 開(kāi)發(fā)模式下，自動(dòng)優(yōu)化打包速度，添加一些調(diào)試過(guò)程中的輔助；
- None 模式下，運(yùn)行最原始的打包，不做任何額外處理；
webpack 模塊的加載方式
- 遵循 ES Modules 標(biāo)準(zhǔn)的 import 聲明
- 遵循 CommonJS 標(biāo)準(zhǔn)的 require 函數(shù)
- 遵循 AMD 標(biāo)準(zhǔn)的 define 函數(shù)和 require 函數(shù)
- 樣式代碼中的 @import 指令和 url 函數(shù)
- HTML 代碼中圖片標(biāo)簽的 src 屬性
webpack 插件及其用法見(jiàn)代碼