頁面出自Webpack官方文檔(撰寫時,是v4.1.1) 其實Webpack本身有中文文檔,不知道是誰去撰寫的,但是自己翻譯一遍感覺更好理解。 https://webpack.js.org/concepts/modules/ 模塊 在模塊化編程中,開發者將單獨功能的代碼分裝成模塊。 每個模塊體積都會 ...
頁面出自Webpack官方文檔(撰寫時,是v4.1.1)
其實Webpack本身有中文文檔,不知道是誰去撰寫的,但是自己翻譯一遍感覺更好理解。
https://webpack.js.org/concepts/modules/
模塊
在模塊化編程中,開發者將單獨功能的代碼分裝成模塊。
每個模塊體積都會比一大坨程式的體積小,使得調試和編寫變得方便。
NodeJs自創建以來就支持了模塊化編程,但是在Web編程中,模塊化一直很遲鈍(沒被支持),當然也有很多為了模塊化而出現的Js模塊化工具,它們各有優缺點。
Webpack去粗取精,繼承它們優秀的地方,使得模塊化適合Web項目中的任何文件。
什麼是Webpack模塊
和NodeJs單一化的表達方式不同,Webpack可以用多種方式來完成、實現模塊化的編程:
- ES6的 import 表達
- CommonJS的 require() 表達
- AMD(非同步模塊定義)的 define 和 require 表達
- CSS/SASS/LESS文件中的 @import 表達
- 樣式表或html文件中的圖像url地址(不明?)
Webpack 1代需要特定的載入器完成ES6的 import 表達,但是Webpack 2代就原生支持了。
支持的模塊類型
Webpack支持用載入器來載入各種不同類型的模塊,載入器會告訴Webpack這些模塊是什麼(因為不是JavaScript模塊了呀),然後會打包在一起。
支持的類型包括:
- CoffeeScript
- TypeScript
- ESNext(Babel)
- Sass
- Less
- Stylus
等等。Webpack支持很多種Web編程的模塊化打包使得開發者更容易進行Web開發。
載入器的全部列表如下:點我