webpack

[ericltw]

Webpack

webpack是module bundler，取代module loader像是RequireJs, SystemJS。webpack以module with dependencies作為import，生成代表這些module靜態資源（.js, .css, .jpg, .png）。

Core concept

• Entry

  An entry point.

• Output

  tell webpack where to emit the bundles it creates and how to name these files.

• Loaders

  Transform certain type of modules to valid type of module. E.g. TypeScript module to JavaScript module.

• Plugins

  相比loaders，plugins悖理用來執行更廣泛的任務，像是bundle optimation, asset management, inject of environment variables.

• Mode

  development, production, none, you can enable webpack's build-in optimizations.

• Borwser Compatibility

  supports all browsers that are ES5-compliant。

Reference

• https://webpack.js.org/concepts/

[ericltw]

Modules

How modules express dependencies

• ES2015 import statement
• CommonJS require() statement
• AMD define and require statement
• @import statement inside of a css/scss file
• image url in a stylesheet

Supported Module Types

Module除了支持JavaScript，因為webpack中的loader機制，能夠預處理非JavaScript的模塊。目前webpack community所支持的module types包含：

• CoffeeScript
• TypeScript
• Sass
• ...

Reference

• https://webpack.js.org/concepts/modules/