Module

In modular programming, developers will individually Functional code is packaged into modules.

The size of each module will be smaller than that of a large program, making debugging and writing easier.

NodeJs has supported modular programming since its creation, but in Web programming, modularization has been slow (not supported). Of course, there are many Js modular tools that have emerged for modularization. There are pros and cons.

Webpack removes the dross and selects the essence, inherits their excellence, making modularization suitable for any file in a Web project.

What is a Webpack module

Different from the single expression of NodeJs, Webpack can complete and implement modular programming in a variety of ways:

ES6’s import expression
CommonJS’s require() expression
define of AMD (asynchronous module definition) and require expression
@import expression in CSS/SASS/LESS file
image url address in style sheet or html file (unknown ? )

Webpack 1st generation requires a specific loader to complete the ES6 import expression, but Webpack 2nd generation supports it natively.

Supported module types

Webpack supports using loaders to load various types of modules. The loader will tell Webpack what these modules are (because they are not JavaScript modules ), and then they will be packaged together.

Supported types include:

CoffeeScript
##TypeScript
ESNext (Babel)
Sass
Less
Stylus

etc. Webpack supports modular packaging of many types of web programming, making it easier for developers to develop web.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!