Webpack Study Notes

1. Background

The front end has evolved from a simple page display to a large front-end application, with the amount of code and resources being added to the natural front-end application. How to solve the rapid display of the browser, the implementation of asynchronous resource loading has become a problem to solve. Secondly, as the amount of front-end code increases, how to achieve modular development or multi-person writing concurrent development, become another problem. Of course, modular development can achieve modular loading, how the entire front-end code is coupled together, it is difficult to implement asynchronous loading.

2. Solution

Only a few mainstream scenarios are covered below

1.Requirejs

1 //implement module definition with define2define ([Dependences],function(depmoduls) {3      returnModule;4 });5 6 //introduction of modules via require7Require ([dependences],function(depmodules) {});8 9 //Lazy Load Routing moduleTen varComponent =function(resolve) { OneRequire (' URL ', resolve);  A }; -  - //additional on-demand loading therequire ([],function(){ -    if(ture) { -require ([],function(){}) -    }  +});

2.ES6 Module

<1> as static as possible, so that the compiler can determine the dependencies of the module, as well as the input and output variables

<2> native Browser does not implement this standard, the new version of Dode.js only support

Expected solution: Not only JavaScript code, but also CSS, pictures, fonts and other resources also need to be modular.

3. Webpack to solve the problem

<1> chunked transfer: Lazy loading on demand, when used in the actual application of some modules in the incremental load.

To implement the on-demand loading of a module requires a static analysis of the modules in the entire code base and the process of compiling the packaging.

<2>JAVASCRIPT,CSS, images, HTML templates exist in different forms, such as Coffeescript,less,sass, as well as various HTML templates.

<3> allows require to load various resources, analyze the types and dependencies of each module, submit different types of modules to the appropriate loader for processing, and require a module-loaded compatibility policy.

4.Webpack Introduction

Webpack is a module packager that will perform static analysis based on the dependencies of the modules, and then generate the corresponding static resources according to the specified rules.

Generating requirements, the current module management and packaging tools are not suitable for large projects, especially single-page Web applications. How to maintain the separation and storage of various code in a large-scale application, maintain the dependencies between them, and seamlessly integrate them together to generate static resources suitable for browser-side request loading.

<1> splitting dependencies into blocks that are loaded on demand

<2> initialization loading takes as little time as possible

<3> various static resources can be considered as modules

<4> ability to integrate third-party libraries into modules

<5> ability to customize the packaging logic

<6> for large projects, whether it's a single-page or multi-page Web application.

One, code splitting

Webpack has two types of organizational modules that are dependent on the way, synchronous and asynchronous. Asynchronously loads as a split point, forming a new block. After optimizing the number of dependencies, each one is packaged as a file.

Second, Loader

The webpack itself can only handle native JavaScript modules, but the loader converter can convert various types of resources into JavaScript modules.

Three, intelligent analysis

Webpack has an intelligent parser that can handle almost any third-party library.

Iv. plug-in system

Five, fast operation

Webpack uses asynchronous I/O and multi-level caching to improve operational efficiency, making webpack fast incremental compilation.

Cond....

Webpack Study Notes