Module (Modules)
In modular programming, developers decompose the program into discrete function blocks (discrete chunks of functionality) and are called modules .
Each module has a smaller contact surface than the complete program, making calibration, commissioning and testing easy.
The well-written modules provide a reliable abstraction and encapsulation boundaries, allowing each module in the application to have a clear design and clear purpose.
node. JS supports modular programming from the very beginning.
However, in the Web, modular support is slowly coming.
There are a variety of tools that support JavaScript modularity in the Web, each with advantages and limitations.
Webpack is based on lessons learned from these systems and applies the concept of modules to any file in the project.
What is the Webpack module
In contrast to the node. JS module, the Webpack module can express their dependencies in a variety of ways, with several examples:
- ES2015
import Statements
- CommonJS
require() Statements
- AMD
define and require statements
- The statement in the Css/sass/less file
@import .
url(...) image link (image URL) in the style () or HTML file ()
Webpack 1 requires a specific loader to convert ES import , however the Webpack 2 can be used out of the box.
Supported module Types
Webpack can support a variety of languages and pre-processor authoring modules through loader .
Loader Describes how Webpack handles non-JavaScript (non-javascript) modules and introduces these dependencies in bundles .
The Webpack community has built loaderfor a variety of popular language and language processors, including:
- Coffeescript
- TypeScript
- Esnext (Babel)
- Sass
- Less
- Stylus
Overall, Webpack provides a customizable, powerful, and rich API that allows any technology stack to use Webpack, maintaining non-intrusive (non-opinionated) in your development, testing, and build processes.
For a complete list, please refer to the loader list or write it yourself.
Webpack-modules (module)