What is Webpack

Webpack ebook

现在，越来越多的网站已经从网页模式进到到了 Webapp 模式，它们运行在高级浏览器中，使用 HTML5、CSS3、ES6等技术来开发丰富的功能。WebApp 通常是一个单页面应用，每一个视图通过异步的方式来加载，这样会导致在加载的时候应用越来越多的 Javascript 语言。现在就需要应对一个问题，如何在开发环境组织好这些碎片化的代码和资源，并且保证它们在浏览器端快速、优雅地加载和更新。这就需要一个模块化系统，这个问题一直都是前端工程师多年来一直探索的问题。

Evolution <script> labeling of modular systems

  
 

   
  

  
<script src="module1.js"></script>
   
  

  
<script src="module2.js"></script>
   
  

  
<script src="libraryA.js"></script>
   
  

  
<script src="module3.js"></script>
  
 

This is the most primitive way to load JavaScript files, so the original loading method exposes some obvious drawbacks:

• It is easy to cause variable conflicts under the global scope;
• Files can only be loaded in <script> order;
• Developers must subjectively solve the dependencies of modules and code base;
• Resources are difficult to manage in large-scale projects, and long-term accumulation of problems leads to a confusing code base

CommonJS

 
   
  

  
    
   
require("module");
  
    
   
require("../file.js");
  
    
   
exports.doStuff = function(){};
  
    
   
module.exports = someValue;
 
   
  

Advantages:

• Server-side modules for ease of reuse
• There are already nearly 200,000 modules available in NPM
• Simple and easy to use

Disadvantages:

• Synchronous module loading mode is not suitable for standing in the browser environment, synchronization means blocking loading, browser resources are loaded asynchronously;
• Cannot load multiple modules in parallel without blocking

AMD (Asynchronous module definition) CMD (Common module definition) UMD (Universal module definition) ES6 module desired module system

Can be compatible with a variety of module style, as far as possible to take advantage of existing code, not just JavaScript modularity, as well as CSS, pictures, fonts and other resources need to be modular.

Front-End Module loading

The front-end modules are executed in the client, so they need to be incrementally loaded into the browser.
can use the chunked transfer , lazy loading on demand, in the actual use of some modules and then incremental update, is a more reasonable module loading scheme.
To implement a module's on-demand load, you need a process for static analysis and compilation of the modules in the entire code base.

All resources are modules

The module can not only refer to the JavaScript module file, but also involves many resources such as style, picture, font, HTML template and so on during the front-end development.
If they can all be seen as modules and can be loaded in a require way, it will bring an elegant development experience, such as:

 
   
  

  
    
   
require("./style.css");
  
    
   
require("./style.less");
  
    
   
require("./template.jade");
  
    
   
require("./image.png");
 
   
  

How can I get require to load various resources? Webpack was born.

What is Webpack

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

From for notes (Wiz)

What is Webpack