webpack learning 2.1 Modular Development (JS & CSS modular Modular)

A modular .JS

Namespace, COMMONJS, AMD / CMD / UMD, ES6 module

1. What is the name space

Library name. Class name Method name

Drawbacks: Repeat life in the namespace, to remember the full path name (and very long)

var NameSpace = {} 
NameSpace.type = NameSpace.type || {} // have defined is its own, it does not define a null object is assigned to it, to avoid problems namespace covered 
NameSpace.type.method = function () {}

2. What COMMONJS (server-side use COMMONJS, the browser does not take COMMONJS module specification)

• Modules/1.1.1
• A file for a module
• Module.exports by exposure module interface
• By introducing modules require
• Synchronous execution

3.AMD (Async Module Definition) ---- asynchronous module definition (running in the browser)

• The method of using the definition module define
• Require the use of load modules
• RequireJS
• Reliance front, ahead of execution

   

 

 

 

4.CMD(Common Module Definition)

• A module file
• Define a module used to define
• Use require to load a module
• Sea JS
• As lazy execution

 

5.UMD (Universal Module Definition) ----- common module definition universal solution

　　Three steps

• Judge whether to support AMD
• Judge whether to support commonJS 
• If neither is defined as a global variable

6.ESM (EcmaScript Module) (but before the COMMONJS some conflict)

　　A module file

　　export/import

   

 

webpack supports three modular approach

1. AMD(Require.js)
2. ES Module (Recommended) [mainstream]
3. CommonJS [mainstream]

 

Two modular .CSS

CSS Design Patterns