webpack

In today’s increasingly complex front-end small projects, project packaging, running, online can be so convenient thanks to WebPack.

We are both familiar with and unfamiliar with Webpack, familiar because I use it in every project I develop, and unfamiliar because we are not familiar with its complex configuration and functions. In the interview, we may also answer some commonly used and familiar Loader and loader Plugin But its operating mechanism and implementation principle is still not clear, so I record my learning process and summary here.

The browser

The browser can only recognize things like.html,.css,.js,.png,.jpg…. But in the actual project, we use different frameworks. In fact, the file name suffix is diverse, so we need Webpack to help us unify the actual files into files that can be recognized by the browser.

What is a webpack

Webpack is a static module packaging tool for modern javascript applications. When using WebPack to process an application, it starts with a list of modules defined on the command line or in a configuration file. From the entry point, it recursively builds a dependency tree that contains the application Each of these modules is then packaged into one or more bundles (usually only one) that can be loaded by the browser

Webpack itself can only handle javascript modules. If you want to handle other types of files, you need to use loader for conversion.

The composition of webpack

  • 1. Entry. The entry starting point of the project, indicating which module Webpack should use to start building the project
  • Output. Indicate where WebPack outputs the bundles it builds, and how to name these files
  • 3. Loader. Webpack can only understand some JS files and JSON files, which is webpack’s own capability. Loader can enable WebPack to process other types of files and convert them into valid modules for use by programs
  • Plugins can perform a wider range of tasks, including packaging optimization, resource management, such as environment variables, etc..
  • There are three values that can be configured,production/Development/None telling Webpack to use the built-in optimizations for the corresponding pattern
  • 6. Context: Webpack supports all ES5-compliant browsers (IE8 and below are not supported), and Webpack import() and require.ensure() require use of promises. If you want to support older browsers, you also need to load Polyfill before using these expressions

The role of webpack

Package the front-end project into a program that the browser can recognize

  • 1. Module packaging: We can package files of different modules together, and ensure correct reference and orderly execution between them. With packaging, we can divide modules freely according to our own business during development, so as to ensure clear and readable project structure.
  • With the development of technology and the more unified implementation of W3C standards, now this problem has been greatly reduced. Through loader mechanism, you can use.less,.scss,.vue,.jsx, . This type of file formats that cannot be recognized by the browser can be compiled and converted. New features and new syntax can be used to improve development efficiency
  • 3. Ability expansion: Through the Plugin mechanism of Webpack, we can further realize a series of functions such as on-demand loading, code compression and so on on the basis of realizing the compatibility of modular packaging and compilation, which helps us to further improve the degree of automation, engineering efficiency and the quality of packaging output

How does Webpack work

After the project runs, WebPack will find the entry and exit of the project compilation based on our project configuration file, 1. First read the configuration of Webpack 2. First read the configuration of the entry of the project, find the entry of the project according to the dependency module imported by the entry file for traversal analysis to form a dependency tree. 3. Use loader to compile and convert dependent module files of different file types into JavaScript files. In the process, Webpack will run out some hooks through the publish and subscribe mode. The Plugin of Webpack can control the output by listening to key event nodes and performing plug-in tasks

Some common webpack loader and plugin introduction and use

1.loader

Loader is used to convert the source code of a module. Loader can make you aware that port or “load “modules are pre-processed files, so Loader is similar to the” task (TRSK)” in other build tools, and provides a powerful way to handle the front-end build step The loader even allows you to import CSS files directly from JavaScript modules by converting the same language to JavScript or inlining images to Data URLS!

The commonly used loader, CSS/less/SCSS/typscript…

2.plugin

Plug-ins are the backbone of WebPack, and WebPack itself builds on top of the same plugin system you use in webPack configuration. Plug-ins are designed to solve things that Loader can’t solve.

Module concept

Modular programming, in which developers break up programs into chunks that can be separated, is called modules.

Advantages: Each module has a smaller size than the program, making verification and testing easier. Independent modules also provide reliable abstraction and encapsulation boundaries, so that each module in the program has a well-defined design and clear purpose.

Webpack module

Compared to NodeJS, Webpack modules can express their dependencies in various ways:

  • 1. Es6 -> import statement
  • 2.CommonJS -> require() statement
  • 3.AMD define and require statements
  • 4. @import statement in the CSS/LESS/SCSS file
  • 5. Stylesheet -> URL () or HTML<img src=... />Image link in file

Hot Module replacement

The HMR-Hot Module replacement function replaces, adds, or removes modules while the application is running without reloading the entire page. Significantly speed up development in the following ways:

  • Preserve application state that is lost during a full page reload.
  • Update only the changes to save valuable development time.
  • When CSS/JS changes are made in the source code, they are immediately updated in the browser, which is almost equivalent to changing styles directly in the browser DevTools