前端性能相关问题 #

• 前端模块化
• gulp和webpack
• vite
• 浏览器性能数据
• webWorker 与 serviceWorker
• 浏览器进程与线程
• 代码分割提高代码使用率
• webpack5更新(简略常用)
• dns-prefetch
• SPA优化首屏
• 前端SEO与踩过的坑
• 性能检测与优化
• 浏览器进程与线程

前端模块化 #

1. 参考链接：

   前端模块化（CommonJS,AMD 和 CMD）

   前端模块化，AMD 与 CMD 的区别

   前端模块化之 AMD 与 CMD 原理

   requireJS 原理解析

   CommonJs、AMD、CMD、Webpack

   「万字进阶」深入浅出 Commonjs 和 Es Module

   什么是amd、commonjs、umd、esm?

2. 详解：

• 模块化为了解决 js 相互引用产生的问题，如：

  • 顺序引入：先引入 jquery，才能引入其它 js
  • 同步加载：1.js 加载并执行完，才加载 2.js
  • window 全局变量污染

• 模块：

  • 普通函数
  • 对象
  • 立即执行函数

• 在 webpack 出现前的 2 种前端模块化工具（代码模块化，执行上没有区别）

  • AMD：异步模块定义，使用 require.js，依赖前置

    采用异步方式加载模块，模块的加载不影响它后面语句的运行，所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行，避免顺序引入和同步加载的问题。

    • 用法：
    javascript

    // 1.js 中（入口用require，其他用define）
    require([[2.js'], function(A) {
        // A得到的就是2.js模块的返回值
        // 主要的执行代码
        // 2.js 3.js都加载完，才执行1.js的这回调函数
    })
    
    // 2.js 中
    define([[3.js', 'xxxx.js'], functionA(B, C) {
        // B得到的就是3.js模块的返回值，C是xxxx.js的
        return aaaaa;    // 2.js 模块的返回值
    })
    
    // 3.js 中
    define([], functionA() {
    
        retrun {}   // 3.js 模块的返回值
    })
    

    • 原理：

      • 块依赖加载之后，如何调用回调函数

        使用 requireJs 时，都是在页面上只引入一个 require.js，把 data-main 指向我们的 main.js

        运行 main.js 时，执行里面的 require 和 define 方法，requireJs 会把这些依赖和回调方法都用一个数据结构存起来

        然后使用 script 来加载这些模块依赖，并且监听 load 函数，且每个 script 元素都会有一个自定义的属性，用来指明模块名

        当模块加载成功之后，可以通过元素属性来获取模块名，接着通过模块名来获取模块的定义，接着对模块进行初始化，再对子模块重复操作

        当子模块没有其他要加载的依赖的时候这个时候表明子模块已经加载完毕，调用回调函数

      • 加载依赖之后，如何将接口暴露给回调函数

        当执行回调函数的时候，会使用 apply 将模块定义中的接口，传递给回调函数

      • 如何解决循环依赖的问题

        将已定义的模块保存在一个对象中，当加载模块依赖的时候，如果在这个对象中存在的话，则直接返回这个模块。否则的话，则再走一遍加载的模块的流程。

    • 代码：

    javascript

    var modules = {},	// 存放所有文件模块的信息，每个js文件模块的信息
    loadings = [];	//	存放所有已经加载了的文件模块的id，一旦该id的所有依赖都加载完后，该id将会在数组中移除
    
    // 上面说了，每个文件模块都要有个id，这个函数是返回当前运行的js文件的文件名，拿文件名作为文件对象的id
    // 比如，当前加载 3.js 后运行 3.js ，那么该函数返回的就是 '3.js'
    function getCurrentJs() {
        return document.currentScript.src
    }
    // 创建节点
    function createNode() {
        var node = document.createElement('script')
        node.type = 'text/javascript'
        node.async = true;
        return node
    }
    // 开始运行
    function init() {
        // 加载 1.js
        loadJs('1.js')
    }
    // 加载文件(插入dom中)，如果传了回调函数，则在onload后执行回调函数
    function loadJs(url, callback) {
        var node = createNode()
        node.src = url;
        node.setAttribute('data-id', url)
        node.addEventListener('load', function(evt) {
            var e = evt.target
            setTimeout(() => {  // 这里延迟一秒，只是让在浏览器上直观的看到每1秒加载出一个文件
                callback && callback(e)
            }, 1000)
        }, false)
    
        document.body.appendChild(node)
    }
    
    // 此时，loadJs(1.js)后，并没有传回调函数，所以1.js加载成功后只是自动运行1.js代码
    // 而1.js代码中，是require( [[2.js', 'xxx.js'], functionA（B, C）{} )，则执行的是require函数, 在下面是require的定义
    
    window.require = function(deps, callback) {
        // deps 就是对应的 [[2.js', 'xxx.js']
        // callback 就是对应的 functionA
        // 在这里，是不会运行callback的(即模块的运行！)，得等到所有依赖都加载完的啊
        // 所以得有个地方，把一个文件的所有信息都先存起来啊，尤其是deps和callback
        var id = getCurrentJs();// 当前运行的是1.js，所以id就是'1.js'
        if(!modules.id) {
            modules[id] = { // 该模块对象信息
                id: id,
                deps: deps,
                callback: callback,
                exports: null,  // 该模块的返回值return ，
                就是functionA(B, C)运行后的返回值，仔细想想？在后面的getExports中详细讲
    
                status: 1,
    
            }
            loadings.unshift(id); // 加入这个id，之后会循环loadings数组，递归判断id所有依赖
        }
    
        loadDepsJs(id); // 加载这个文件的所有依赖,即去加载[2.js]
    }
    
    function loadDepsJs(id) {
        var module = modules[id]; // 获取到这个文件模块对象
        // deps是[[2.js']
        module.deps.map(item => {   // item 其实是依赖的Id，即 '2.js'
            if(!modules[i]) {   // 如果这个文件没被加载过（注：加载过的肯定在modules中有）
            （1）    loadJs(item, function() {   // 加载 2.js，并且传了个回调，准备要递归了
                        // 2.js加载完后，执行了这个回调函数
                        loadings.unshift(item); // 此时里面有两个了, 1.js 和 2.js
                        // 递归。。。要去搞3.js了
                        loadDepsJs(item)// item传的2.js，递归再进来时，就去modules中取2.js的deps了
                        // 每次检查一下，是否都加载完了
                        checkDeps(); // 循环loadings，配合递归嵌套和modules信息，判断是否都加载完了
                    })
            }
        })
    }
    
    // 上面（1）那里，加载了2.js后马上会运行2.js的，而2.js里面是
    define([[js'], fn)
    // 所以相当于执行了 define函数
    
    window.define = function(deps,callback) {
        var id = getCurrentJs()
        if(!modules.id) {
            modules[id] = {
                id: id,
                deps: getDepsIds(deps),
                callback: callback,
                exports: null,
                status: 1,
    
            }
        }
    }
    
    // 注意，define运行的结果，只是在modules中添加了该模块的信息
    // 因为其实在上面的loadDepsJs中已经事先做了loadings和递归deps的操作，而且是一直不断的循环往复的进行探查，所以define里面就不需要再像require中写一次loadDeps了
    
    // 循环loadings，查看loadings里面的id，其所依赖的所有层层嵌套的依赖模块是否都加载完了
    
    function checkDeps() {
        for(var i = 0, id; i < loadings.length ; i++) {
        id = loadings[i]
        if(!modules[id]) continue
    
        var obj = modules[id],
        deps = obj.deps
    
        // 下面那行为什么要执行checkCycle函数呢，checkDeps是循环loadings数组的模块id，而checkCycle是去判断该id模块所依赖的**层级**的模块是否加载完
        // 即checkDeps是**广度**的循环已经加载（但依赖没完全加载完的）的id
        // checkCycle是**深度**的探查所关联的依赖
        // 还是举例吧。。。假如除了1.js, 2.js, 3.js, 还有个4.js，依赖5.js，那么
        // loadings 可能 是 [[1.js', '4.js']
        // 所以checkDeps --> 1.js，  4.js
        // checkCycle深入内部 1.js --> 2.js --> 3.js ;;; 4.js --> 5.js
        // 一旦比如说1.js的所有依赖2.js、3.js都加载完了，那么1.js 就会在loadings中移出
    
        var flag = checkCycle(deps)
    
        if(flag) {
                console.log(i, loadings[i] ,'全部依赖已经loaded');
    
                loadings.splice(i,1);
                // ！！！运行模块，然后同时得到该模块的返回值！！！
                getExport(obj.id)
                // 不断的循环探查啊~~~~
                checkDeps()
        }
    
        }
    }
    // 深层次的递归的去判断，层级依赖是否都加在完了
    // 进入1.js的依赖2.js，再进入2.js的依赖3.js ......
    function checkCycle(deps) {
        var flag = true
    
        function cycle(deps) {
            deps.forEach(item => {
                if(!modules[item] || modules[item].status == 1) {
                    flag = false
                } else if(modules[item].deps.length) {
    //                         console.log('inner deps', modules[item].deps);
    
                    cycle(modules[item].deps)
                }
    
            })
        }
    
        cycle(deps)
    
        return flag
    }
    
    /*
        运行该id的模块，同时得到模块返回值，modules[id].export
    */
    function getExport(id) {
        /*
            先想一下，例如模块2.js, 这时 id == 2.js
            define([[3.js', 'xxxx.js'], functionA(B, C) {
                // B得到的就是3.js模块的返回值，C是xxxx.js的
                return aaaaa    // 2.js 模块的返回值
            })
            所以：
            1. 运行模块，就是运行 functionA （模块的callback）
            2. 得到模块的返回值，就是functionA运行后的返回值 aaaaa
            问题：
            1. 运行functionA(B, C)   B, C是什么？怎么来的？
            2. 有B, C 了，怎么运行functionA ？
    
        */
        // 解决问题1
        // B, C 就是该模块依赖 deps [3.js, xxxx.js]对应的返回值
        // 那么循环deps 得到 依赖模块Id, 取模块的export
        var params = [];
        var deps = modules[id].deps
    
        for(var i = 0; i < deps.length; i++) {
            // 取依赖模块的exports即模块返回值，注意不要害怕取不到，因为你这个模块都进来打算运行了，那么你的所有依赖的模块早都进来过运行完了（还记得模块运行顺序不？）
            let depId = deps[i]
            params.push( modules[ depId ].exports )
        }
    
        // 到这里,params就是依赖模块的返回值的数组，也就是B，C对应的实参
        // 也就是 params == [3.js的返回值，xxxx.js的返回值]
    
        if(!modules[id].exports) {
            // 解决问题2： callback(functionA)的执行，用.apply，这也是为什么params是个数组了
            // 这一行代码，既运行了该模块，同时也得到了该模块的返回值export
            modules[id].exports = modules[id].callback.apply(global, params)
        }
    }
    

    • 模块运行顺序：

      3.js，2.js，1.js，如果模块以及该模块的依赖都加载完，就执行。 如 3.js 加载完后，没有依赖，直接执行 3.js 的回调了，2.js 加载完后探查到依赖的 3.js 也加载完，2.js 执行自己的回调了,主模块一定在最后执行

    • CMD：通用模块定义，使用sea.js，依赖就近

      • 用法：
      javascript

      // 只有define，没有require
      // 和AMD那个例子一样，还是1依赖2, 2依赖3
      //1.js中
      define(function() {
      
          var a = require('2.js')
          console.log(33333)
          var b = require('4.js')
      })
      
      //2.js 中
      define(function() {
          var b = require('3.js')
      })
      //3.js 中
      define(function() {
          // xxx
      })
      

      • 原理同AMD

      • 模块运行顺序：

        1.js，2.js，3.js，即先执行主模块1.js，碰到require('2.js')就执行2.js，2.js中碰到require('3.js')就执行3.js

    • es6模块化与commonjs区别

      es6模块化：import-export，编译时加载 commonjs：require，module.exports=对象/函数，运行时加载

• 服务器端模块化工具

  • webpack基于CommonJs

    同步加载

    一个单独的文件就是一个模块，每一个模块都是一个单独的作用域，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性。

    加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象，用来输出模块。

• 模块化代码示例

  • amd

    javascript

    define([[jquery', 'underscore'], function ($, _) {
        //    methods
        function a(){};    //    private because it's not returned (see below)
        function b(){};    //    public because it's returned
        function c(){};    //    public because it's returned
    
        //    exposed public methods
        return {
            b: b,
            c: c
        }
    });
    

  • commonjs

    javascript

    //    dependencies
    var $ = require('jquery');
    
    //    methods
    function myFunc(){};
    
    //    exposed public method (single)
    module.exports = myFunc;
    

  • umd(amd和commonjs的统一规范)

    javascript

    (function (root, factory) {
        if (typeof define === 'function' && define.amd) {
            // AMD
            define([[jquery', 'underscore'], factory);
        } else if (typeof exports === 'object') {
            // Node, CommonJS-like
                module.exports = factory(require('jquery'), require('underscore'));
        } else {
            // Browser globals (root is window)
            root.returnExports = factory(root.jQuery, root._);
        }
    }(this, function ($, _) {
        //    methods
        function a(){};    //    private because it's not returned (see below)
        function b(){};    //    public because it's returned
        function c(){};    //    public because it's returned
    
        //    exposed public methods
        return {
            b: b,
            c: c
        }
    }));
    

  • ESM

    javascript

    import React from 'react';
    

• 问题

  • 为什么：每个模块文件上存在 module，exports，require三个变量，然而这三个变量是没有被定义的，但是我们可以在 Commonjs 规范下每一个 js 模块上直接使用它们？

    在编译的过程中，实际 Commonjs 对 js 的代码块进行了首尾包装，会形成一个包装函数，我们写的代码将作为包装函数的执行上下文，使用的 require ，exports ，module 本质上是通过形参的方式传递到包装函数中的。

    javascript

    //module 记录当前模块信息。
    //require 引入模块的方法。
    //exports 当前模块导出的属性
    function wrapper (script) {
        return '(function (exports, require, module, __filename, __dirname) {' + 
            script +
        '\n})'
    }
    

  • require 大致流程

    require 会接收一个参数——文件标识符，然后分析定位文件，从 Module 上查找有没有缓存，如果有缓存，那么直接返回缓存的内容。

    如果没有缓存，会创建一个 module 对象，缓存到 Module 上，然后执行文件，加载完文件，将 loaded 属性设置为 true ，然后返回 module.exports 对象。借此完成模块加载流程。

  • require 如何避免重复加载?

    加载之后的文件的 module 会被缓存到 Module 上，如果另外一个模块再次引用 ，那么会直接读取缓存值 module ，所以无需再次执行模块。

  • require 如何避免循环引用?

    将已定义的module保存在一个对象Module中，当加载模块依赖的时候，如果在这个对象Module中存在的话，则直接返回这个模块。否则的话，则再走一遍加载的模块的流程。

  • 为什么 exports={} 直接赋值一个对象就不可以呢？必须exports.xxx=***

    exports ， module 和 require 作为形参的方式传入到 js 模块中，直接 exports = {} 修改 exports ，等于重新赋值了形参，那么会重新赋值一份，但是不会在引用原来的形参。

    形如

    javascript

    function wrap (myExports){//Commonjs 规范下的包装函数，里面是我们需要写的代码
        myExports={
          name:'我不是外星人'
      }
    }
    
    let myExports = {
        name:'alien'
    }
    wrap(myExports)
    console.log(myExports)//{name:'alien'}
    

  • 既然有了 exports，为何又出了 module.exports ?

    module.exports 本质上就是 exports，持有相同引用，module.exports 也可以单独导出一个函数或者一个类。

    module.exports和exports不能同时存在，否则会覆盖数据。

    module.exports可以直接赋值函数或对象，而exports只能赋值于对象属性。

    显然module.exports会更加便利。

  • 与 exports 相比，module.exports 有什么缺陷 ？

    module.exports 当导出一些函数等非对象属性的时候，也有一些风险，就比如循环引用的情况下。对象会保留相同的内存地址，就算一些属性是后绑定的，也能间接通过异步形式访问到。但是如果 module.exports 为一个非对象其他属性类型，在循环引用的时候，就容易造成属性丢失的情况。

  • Commonjs 的特性

    • CommonJS 模块由 JS 运行时实现。
    • CommonJs 是单个值导出，本质上导出的就是 exports 属性。
    • CommonJS 是可以动态加载的，对每一个加载都存在缓存，可以有效的解决循环引用问题。
    • CommonJS 模块同步加载并执行模块文件。

  • Es module 的特性

    • ES6 Module 静态的，不能放在块级作用域内，代码发生在编译时。
    • ES6 Module 的值是动态绑定的，可以通过导出方法修改，可以直接访问修改结果。
    • ES6 Module 可以导出多个属性和方法，可以单个导入导出，混合导入导出。
    • ES6 模块提前加载并执行模块文件，
    • ES6 Module 导入模块在严格模式下。
    • ES6 Module 的特性可以很容易实现 Tree Shaking 和 Code Splitting。

gulp和webpack #

1. 参考链接：

   gulp 官方文档

   webpack4.x 配置详解，多页面，拆分代码，多入口，多出口，新特性新坑

   webpack 官网

   Webpack 之 treeShaking

   webpack-js tree shaking

   webpack 如何优雅的使用 tree-shaking

   webpack 的 loader 和 plugin 的区别

   超详细的 webpack 原理解读

   vue 项目中使用 webpack 优化之 HappyPack 实战

   4-3 使用 HappyPack

   使用 vue-cli 构建项目中的 Webpack 优化

   webpack 中如何编写一个 plugin

   Webpack 热更新实现原理分析

   彻底搞懂并实现 webpack 热更新原理

   Webpack 热更新机制

   手把手教你撸一个 Webpack Loader

   关于 webpack 的面试题

   gulp配置指南

   你的 import 被 webpack 编译成了什么？

   gulp构建项目（十三）：babel-polyfill编译es6新增api

   项目依赖同一npm包的多版本，会有冲突吗

   webpack的文件监听实现（热更新）

   由浅至深了解webpack异步加载背后的原理

   腾讯面试官：兄弟，你说你会Webpack，那说说他的原理？

2. 详解：

   • webpack 与 grunt、gulp 的不同

     grunt 和 gulp 是基于任务和流（Task、Stream），整条链式操作构成了一个任务，多个任务形成构建过程

     webpack 是基于入口的。webpack 会自动地递归解析入口所需要加载的所有资源文件，然后用不同的 Loader 来处理不同的文件，用 Plugin 来扩展 webpack 功能

   • 与 webpack 类似的工具还有哪些

     • webpack 适用于大型复杂的前端站点构建
     • rollup 适用于基础库的打包，如 vue、react
     • parcel 适用于简单的实验性项目，他可以满足低门槛的快速看到效果
     • 由于 parcel 在打包过程中给出的调试信息十分有限，所以一旦打包出错难以调试，所以不建议复杂的项目使用 parcel

   • 有哪些常见的 Loader

     • file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件
     • url-loader：和 file-loader 类似，但是能在文件很小的情况下以 base64 的方式把文件内容注入到代码中去
     • source-map-loader：加载额外的 Source Map 文件，以方便断点调试
     • image-loader：加载并且压缩图片文件
     • babel-loader：把 ES6 转换成 ES5
     • css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
     • style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。
     • eslint-loader：通过 ESLint 检查 JavaScript 代码
     • sass-loader：把 sass 转换为 css
     • 更多

   • 有哪些常见的 Plugin

     • define-plugin：定义环境变量
     • commons-chunk-plugin：提取公共代码
     • uglifyjs-webpack-plugin：通过 UglifyES 压缩 ES6 代码
     • HotModuleReplacementPlugin：热更新
     • purifyCssWebpack：消除冗余的 css 代码
     • 更多

   • Loader 和 Plugin 的不同

     • Loader 直译为"加载器"。Webpack 将一切文件视为模块，但是 webpack 原生是只能解析 js 文件，如果想将其他文件也打包的话，就会用到 loader。 所以 Loader 的作用是让 webpack 拥有了加载和解析非 JavaScript 文件的能力。

     • Plugin 直译为"插件"。Plugin 可以扩展 webpack 的功能，让 webpack 具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

     • 不同的用法

       • Loader 在 module.rules 中配置，作为模块的解析规则而存在。类型为数组，每一项都是一个 Object，里面描述了对于什么类型的文件（test），使用什么加载(loader)和使用的参数（options）

       • Plugin 在 plugins 中单独配置。类型为数组，每一项是一个 plugin 的实例，参数都通过构造函数传入。

   • webpack运行原理

     1. 解析入口文件entry，将其转为AST(抽象语法树)，使用@babel/parser
     2. 然后使用@babel/traverse去找出入口文件所有依赖模块
     3. 然后使用@babel/core+@babel/preset-env将入口文件的AST转为Code
     4. 将2中找到的入口文件的依赖模块，进行遍历递归，重复执行1，2，3
     5. 重写require函数，并与4中生成的递归关系图一起，输出到bundle中

   • webpack 的构建流程是什么?从读取配置到输出文件这个过程尽量说全

     运行前，需要先使用命令 npm init 构建 package.json 配置文件，npm install 相关的 module，scripts 中编写运行命令，最后 npm run ***运行

     javascript

     {
       "name": "react-family",
       "version": "1.0.0",
       "description": "learn react-family",
       "main": "src/index.js",
       "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "build": "webpack --config webpack.dev.config.js"
       },
       "author": "...",
       "license": "ISC",
       "devDependencies": {
         "babel-cli": "^6.26.0",
         "babel-core": "^6.26.0",
         "babel-loader": "^7.1.2",
         "babel-preset-env": "^1.6.1",
         "babel-preset-es2015": "^6.24.1",
         "babel-preset-react": "^6.24.1",
         "babel-preset-stage-0": "^6.24.1",
         "webpack": "^3.10.0"
       },
       "dependencies": {}
     }
     

     Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：

     1. 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；
     2. 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；
     3. 确定入口：根据配置中的 entry 找出所有的入口文件；
     4. 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
     5. 完成模块编译：Loader 翻译完所有模块后，得到了每个模块的最终内容以及它们之间的依赖关系；
     6. 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
     7. 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

     在以上过程中，Webpack 会在特定的时间点广播出特定的事件(详见下方“插件样例”)，插件在监听到定义的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。

   • 描述一下编写 loader 或 plugin 的思路

     Loader 像一个"翻译官"把读到的源文件内容转义成新的文件内容，并且每个 Loader 通过链式操作，将源文件一步步翻译成想要的样子。

     编写 Loader 时要遵循单一原则，每个 Loader 只做一种"转义"工作。 每个 Loader 拿到的是源文件内容（source），可以通过返回值的方式将处理后的内容输出，也可以调用 this.callback()方法，将内容返回给 webpack。 还可以通过 this.async()生成一个 callback 函数，再用这个 callback 将处理后的内容输出出去。 此外 webpack 还为开发者准备了开发 loader 的工具函数集——loader-utils。

     相对于 Loader 而言，Plugin 的编写就灵活了许多。 webpack 在运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

   • 如何利用 webpack 来优化前端性能

     • 压缩代码。删除多余的代码、注释、简化代码的写法等等方式。可以利用 webpack 的 UglifyJsPlugin 和 ParallelUglifyPlugin 来压缩 JS 文件， 利用 cssnano（css-loader?minimize）来压缩 css

     • 利用 CDN 加速。在构建过程中，将引用的静态资源路径修改为 CDN 上对应的路径。可以利用 webpack 对于 output 参数和各 loader 的 publicPath 参数来修改资源路径

     • 删除死代码（Tree Shaking）。将代码中永远不会走到的片段删除掉。可以通过在启动 webpack 时追加参数--optimize-minimize 来实现

     • 提取公共代码。

   • 如何提高 webpack 的构建速度

     • 多入口情况下，使用 CommonsChunkPlugin 来提取公共代码

     • 通过 externals 配置来提取常用库

     • 利用 DllPlugin 和 DllReferencePlugin 预编译资源模块，通过 DllPlugin 来对那些我们引用但是绝对不会修改的 npm 包来进行预编译，再通过 DllReferencePlugin 将预编译的模块加载进来。

     • 使用 Happypack 实现多线程加速编译(webpack4 弃用见下方)

     • 使用 webpack-uglify-parallel 来提升 uglifyPlugin 的压缩速度。 原理上 webpack-uglify-parallel 采用了多核并行压缩来提升压缩速度

     • 使用 Tree-shaking(删除项目中未被引用的代码) 和 Scope Hoisting(代码就会尽可能的合并到一个函数中去) 来剔除多余代码

       Tree-shaking会自动开启

       Scope Hoisting

       javascript

       module.exports = {
         optimization: {
           concatenateModules: true
         }
       }
       

   • 怎么配置单页应用？怎么配置多页应用？

     单页应用可以理解为 webpack 的标准模式，直接在 entry 中指定单页应用的入口即可

     多页应用可以使用 webpack 的 AutoWebPlugin 来完成简单自动化的构建，但是前提是项目的目录结构必须遵守他预设的规范。 多页应用中要注意的是：

       每个页面都有公共的代码，可以将这些代码抽离出来，避免重复的加载。比如，每个页面都引用了同一套css样式表
     
       随着业务的不断扩展，页面可能会不断的追加，所以一定要让入口的配置足够灵活，避免每次添加新页面还需要修改构建配置
     

   • npm 打包时需要注意哪些？如何利用 webpack 来更好的构建

     npm 是目前最大的 JavaScript 模块仓库，里面有来自全世界开发者上传的可复用模块。你可能只是 JS 模块的使用者，但是有些情况你也会去选择上传自己开发的模块。 关于 NPM 模块上传的方法可以去官网上进行学习，这里只讲解如何利用 webpack 来构建。

     • NPM 模块需要注意以下问题：
     1. 要支持 CommonJS 模块化规范，所以要求打包后的最后结果也遵守该规则。
     2. Npm 模块使用者的环境是不确定的，很有可能并不支持 ES6，所以打包的最后结果应该是采用 ES5 编写的。并且如果 ES5 是经过转换的，请最好连同 SourceMap 一同上传。
     3. Npm 包大小应该是尽量小（有些仓库会限制包大小）
     4. 发布的模块不能将依赖的模块也一同打包，应该让用户选择性的去自行安装。这样可以避免模块应用者再次打包时出现底层模块被重复打包的情况。
     5. UI 组件类的模块应该将依赖的其它资源文件，例如.css 文件也需要包含在发布的模块里。
     • 基于以上需要注意的问题，我们可以对于 webpack 配置做以下扩展和优化：
     1. CommonJS 模块化规范的解决方案： 设置 output.libraryTarget='commonjs2'使输出的代码符合 CommonJS2 模块化规范，以供给其它模块导入使用
     2. 输出 ES5 代码的解决方案：使用 babel-loader 把 ES6 代码转换成 ES5 的代码。再通过开启 devtool: 'source-map'输出 SourceMap 以发布调试。
     3. npm 包大小尽量小的解决方案：Babel 在把 ES6 代码转换成 ES5 代码时会注入一些辅助函数，最终导致每个输出的文件中都包含这段辅助函数的代码，造成了代码的冗余。解决方法是修改.babelrc 文件，为其加入 transform-runtime 插件
     4. 不能将依赖模块打包到 NPM 模块中的解决方案：使用 externals 配置项来告诉 webpack 哪些模块不需要打包。
     5. 对于依赖的资源文件打包的解决方案：通过 css-loader 和 extract-text-webpack-plugin 来实现，配置如下：
     javascript

     const ExtractTextPlugin = require ('extract-text-webpack-plugin');
     module.exports = {
         module: {
             rules:[
                 {
                     //增加对CSS文件的支持
                     test:/\.css/,
                     // 提取出Chunk中的CSS代码到单独的文件中
                     use: ExtractTextPlugin.extract({
                         use: [[css-loader']
                     }),
                 },
             ]
         },
         plugins:[
             new ExtractTextPlugin({
                 // 输出的CSS文件名称
                 filenames 'index.css'
             })
         ]
     }
     

   • 如何在 vue 项目中实现按需加载

     Vue UI 组件库的按需加载为了快速开发前端项目，经常会引入现成的 UI 组件库如 ElementUI、iView 等，但是他们的体积和他们所提供的功能一样，是很庞大的。 而通常情况下，我们仅仅需要少量的几个组件就足够了，但是我们却将庞大的组件库打包到我们的源码中，造成了不必要的开销。

     不过很多组件库已经提供了现成的解决方案，如 Element 出品的 babel-plugin-component 和 AntDesign 出品的 babel-plugin-import 安装以上插件后，在.babelrc 配置中或 babel-loader 的参数中进行设置，即可实现组件按需加载了。

     单页应用的按需加载 现在很多前端项目都是通过单页应用的方式开发的，但是随着业务的不断扩展，会面临一个严峻的问题——首次加载的代码量会越来越多，影响用户的体验。

     详见“vue 简结”-“注意或优化的地方”-“babel”

     通过 import()语句来控制加载时机，webpack 内置了对于 import()的解析，会将 import()中引入的模块作为一个新的入口在生成一个 chunk。 当代码执行到 import()语句时，会去加载 Chunk 对应生成的文件。import()会返回一个 Promise 对象，所以为了让浏览器支持，需要事先注入 Promise polyfill

     详见“vue 简结”-“动态组件与异步组件”

   • webpack异步加载原理

     webpack4 官方文档提供了模块按需切割加载，配合 es6 的按需加载 import() 方法，可以做到减少首页包体积，加快首页的请求速度，只有其他模块，只有当需要的时候才会加载对应 js。

     import()的语法十分简单。该函数只接受一个参数，就是引用包的地址，并且使用了 promise 式的回调，获取加载的包。在代码中所有被 import()的模块，都将打成一个单独的包，放在 chunk 存储的目录下。在浏览器运行到这一行代码时，就会自动请求这个资源，实现异步加载。

     经过 webpack 打包，每一个 chunk 内的模块文件，都是组合成形如

     javascript

     (function(modules){
     //....
     })({
       [moduleName:string] : function(module, __webpack_exports__, __webpack_require__){
         eval('模块文件源码')
       }
     })
     

     在立即执行函数的入参modules上挂上别的 webpack 环境异步加载的部分模块代码。

     采用 jsonp 的方式来实现模块的异步加载

   • 项目依赖同一npm包的多版本，会有冲突吗?

     项目trade，依赖了[email protected]版本。 然后我又引入了B，而B依赖[email protected]版本，这时候会产生冲突吗？

     不会有冲突，因为这种场景太常见了。

     node_modules中包的下载安装目录

     text

     trade
     ├─ [email protected]
     └┬ B
       └─ [email protected]
     

     webpack生成bundle，打包的策略:import的模块都叫做A，但是webpack内部，是把模块的路径当做模块的id标识来区分的，所以就不会找错了

     javascript

     // webpack模块的管理
     {
       "./node_modules/A/index.min.js": function() {},
       "./node_modules/B/node_modules/A/index.min.js": function() {}
     }
     

   • gulp 配置

   text

   //.babelrc
   {
       "presets": [
           "es2015"
       ]
   }
   

   javascript

   //3.9.0
   var gulp = require("gulp"),
     sass = require("gulp-sass"),
     autoprefixer = require("gulp-autoprefixer"),
     minifycss = require("gulp-minify-css"),
     imagemin = require("gulp-imagemin"),
     babel = require("gulp-babel"),
     jshint = require("gulp-jshint"),
     concat = require("gulp-concat"),
     uglify = require("gulp-uglify"),
     livereload = require("gulp-livereload"),
     notify = require("gulp-notify"),
     cache = require("gulp-cache"),
     rename = require("gulp-rename"),
     del = require("del");
   
   gulp.task('scripts', function() {
       gulp.src('src/js/Home/*.js')
           .pipe(babel())//转译es5，需配置.babelrc
           .pipe(uglify())//压缩
           .pipe(rename({ suffix: '.min' }))//重命名为*.min.js
           .pipe(gulp.dest('Content/themes/base/minjs/Home'))//输出文件到指定位置
           .pipe(notify({
               message: 'Home js task complete'//控制台输出任务完成
           }));
       gulp.src('src/js/Shared/*.js')
           .pipe(babel())
           .pipe(uglify())
           .pipe(rename({ suffix: '.min' }))
           .pipe(gulp.dest('Content/themes/base/minjs/Shared'))
           .pipe(notify({
               message: 'Shared js task complete'
           }));
   });
   
   gulp.task('styles', function() {
       gulp.src('src/scss/Home/*.scss')
           .pipe(sass())//编译sass
           .pipe(autoprefixer('last 2 version', 'safari 8', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))//自动添加prefix适配
           .pipe(minifycss())//压缩
           .pipe(rename({ suffix: '.min' }))//重命名为*.min.css
           .pipe(gulp.dest('Content/themes/base/css/Home'))//输出文件到指定位置
           .pipe(notify({
               message: 'Home css task complete'//控制台输出任务完成
           }));
       gulp.src('src/scss/Shared/*.scss')
           .pipe(sass())
           .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
           .pipe(minifycss())
           .pipe(rename({ suffix: '.min' }))
           .pipe(gulp.dest('Content/themes/base/css/Shared'))
           .pipe(notify({
               message: 'Shared css task complete'
           }));
   });
   
   gulp.task('auto', function() {
       gulp.watch([[src/js/*/*.js'], [[scripts']);//监听文件变化
       gulp.watch([[src/scss/*/*.scss'], [[styles']);
   });
   
   gulp.task('default', [[styles', 'scripts', 'auto']);
   

   • gulp 打包报错不中断
   javascript

   //npm install -D gulp-plumber
   var plumber = require('gulp-plumber');
   gulp.src(src_dir + "/scripts/**/*.js")
           .pipe(plumber())  //优先使用plumber()
           .pipe(jshint())
           .pipe(jshint.reporter('default'));
   
   gulp.src(dist_dir + "/templates/**/*.html")
           .pipe(plumber())
           .pipe(htmlmin({
               collapseWhitespace: true
           }))
           .pipe(templateCache("tpl.min.js", {
               module: "xt.templates",
               standalone: true
           }))
           .pipe(gulpif(isUglify, uglify()))
           .pipe(gulp.dest(dist_dir + "/scripts/"));
   

   • gulp 使用babel-polyfill

     gulp无法像webpack一样打包出浏览器能识别的代码，gulp-babel只能将es6语法编译成es5，比如：箭头函数、let变量等，但是API不能编译，比如Object.assign，因此需要手动在html中引入polyfill的js(babel-polyfill)

     https://cdn.bootcss.com/babel-polyfill/7.0.0-rc.4/polyfill.min.js

   • webpack配置
   text

   "dev": "webpack --mode=development",
   "build": "webpack --mode=production",
   "start": "webpack-dev-server"
   

   完全配置

   javascript

   const webpack = require("webpack");
   const path = require('path');
   //返回匹配指定模式的文件名或目录
   const glob = require("glob");
   //消除冗余的css
   const purifyCssWebpack = require("purifycss-webpack");
   // html模板
   const htmlWebpackPlugin = require("html-webpack-plugin");
   // 清除目录等
   const cleanWebpackPlugin = require("clean-webpack-plugin");
   //4.x之前用以压缩
   const uglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin");
   //ES压缩
   const UglifyESPlugin = require('uglify-webpack-plugin');
   // 分离css
   const extractTextPlugin = require("extract-text-webpack-plugin");
   //静态资源输出
   const copyWebpackPlugin = require("copy-webpack-plugin");
   
   module.exports = {
       entry: {
           // 多入口文件
           a: './src/js/index.js',
           b: './src/js/index2.js',
           jquery: 'jquery'
       },
       output: {
           path:path.resolve(__dirname, 'dist'),
           // 打包多出口文件
           // 生成 a.bundle.js  b.bundle.js  jquery.bundle.js
           filename: './js/[name].bundle.js'
       },
       // devtool: "source-map",  // 开启调试模式
       module:{
           rules: [
               {
                   test: /\.css$/,
                   // 不分离的写法
                   // use: ["style-loader", "css-loader"]
                   // 使用postcss不分离的写法
                   // use: ["style-loader", "css-loader", "postcss-loader"]
                   // 此处为分离css的写法
                   /*use: extractTextPlugin.extract({
                       fallback: "style-loader",
                       use: "css-loader",
                       // css中的基础路径
                       publicPath: "../"
   
                   })*/
                   // 此处为使用postcss分离css的写法
                   // use: extractTextPlugin.extract({
                   //     fallback: "style-loader",
                   //     use: ["css-loader", "postcss-loader"],
                   //     // css中的基础路径
                   //     publicPath: "../"
                   // })
                   //此处可配置压缩css
                   use: [
                       {
                           loader: 'style-loader'
                       },
                       {
                           loader: 'css-loader',
                           options: {
                               root: '/', //修改css中url指向的根目录, 默认值为/, 对于绝对路径, css-loader默认是不会对它进行处理的
                               modules: false, //开启css-modules模式, 默认值为flase
                               localIdentName: '[name]-[local]-[hash:base64:5]', //设置css-modules模式下local类名的命名
                               minimize: false, //压缩css代码, 默认false
                               camelCase: false, //导出以驼峰化命名的类名, 默认false
                               import: true, //禁止或启用@import, 默认true
                               url: true, //禁止或启用url, 默认true
                               sourceMap: false, //禁止或启用sourceMap, 默认false
                               importLoaders: 0, //在css-loader前应用的loader的数目, 默认为0
                               alias: {} //起别名, 默认{}
                           }
                       }
                   ]
               },
               {
                   test: /\.js$/,
                   use: ["babel-loader"],
                   // 不检查node_modules下的js文件
                   exclude: "/node_modules/"
               },
               {
                   test: /\.(png|jpg|gif)$/,
                   use: [{
                           // 需要下载file-loader和url-loader
                           loader: "url-loader",
                           options: {
                               limit: 50,
                               // 图片文件输出的文件夹
                               outputPath: "images"
                           }
                       }
                   ]
               },
               {
                   test: /\.(png|jpg|gif|svg)$/,
                   use: [
                   'file-loader',
                   {
                       loader: 'image-webpack-loader',
                       options: {
                           bypassOnDebug: true,
                           mozjpeg: {
                               progressive: true,
                               quality: 65
                           },
                           optipng: {
                               enabled: false,
                           },
                           pngquant: {
                               quality: '65-90',
                               speed: 4
                           },
                           gifsicle: {
                               interlaced: false,
                           },
                           // the webp option will enable WEBP
                           webp: {
                               enabled: false,
                           },
                           limit: 1,
                           name: '[name].[ext]?[hash]'
                       }
                   }]
               },
               {
                   test: /\.html$/,
                   // html中的img标签
                   use: ["html-withimg-loader"]
               },
               {
                   test: /\.less$/,
                   // 三个loader的顺序不能变
                   // 不分离的写法
                   // use: ["style-loader", "css-loader", "less-loader"]
                   // 分离的写法
                   use: extractTextPlugin.extract({
                       fallback:"style-loader",
                       use: ["css-loader", "less-loader"]
                   })
               },
               {
                   test: /\.(scss|sass)$/,
                   // sass不分离的写法，顺序不能变
                   // use: ["style-loader", "css-loader", "sass-loader"]
                   // 分离的写法
                   use: extractTextPlugin.extract({
                       fallback:"style-loader",
                       use: ["css-loader", "sass-loader"]
                   })
               }
           ]
       },
       plugins: [
           new webpack.HotModuleReplacementPlugin(),
           // 调用之前先清除
           new cleanWebpackPlugin(["dist"]),
           // 4.x之前可用uglifyjs-webpack-plugin用以压缩文件，4.x可用--mode更改模式为production来压缩文件
           new UglifyJSPlugin({
               compress: {
                   warnings: false,  //删除无用代码时不输出警告
                   drop_console: true,  //删除所有console语句，可以兼容IE
                   collapse_vars: true,  //内嵌已定义但只使用一次的变量
                   reduce_vars: true,  //提取使用多次但没定义的静态值到变量
               },
               output: {
                   beautify: false, //最紧凑的输出，不保留空格和制表符
                   comments: false, //删除所有注释
               }
           }),
           //ES压缩插件
           new UglifyESPlugin({
               uglifyOptions: {  //比UglifyJS多嵌套一层
                   compress: {
                       warnings: false,
                       drop_console: true,
                       collapse_vars: true,
                       reduce_vars: true
                   },
                   output: {
                       beautify: false,
                       comments: false
                   }
               }
           }),
           new copyWebpackPlugin([{
               from: path.resolve(__dirname,"src/assets"),
               to: './public'
           }]),
           // 分离css插件参数为提取出去的路径
           new extractTextPlugin("css/index.css"),
           // 消除冗余的css代码
           new purifyCssWebpack({
               // glob为扫描模块，使用其同步方法
               paths: glob.sync(path.join(__dirname, "src/*.html"))
           }),
           // 全局暴露统一入口
           new webpack.ProvidePlugin({
               $: "jquery"
           }),
           // 自动生成html模板
           new htmlWebpackPlugin({
               minify:{
                   removeAttributeQuotes:true//去掉双引号
               },
               hash:true,//加入哈希来禁止缓存
               filename: "index.html",// 编译后的文件及路径
               title: "xxxx",
               chunks: [[a',"jquery"],  // 按需引入对应名字的js文件
               template: "./src/index.html"//  源模板
           }),
           new htmlWebpackPlugin({
               chunks: [[b'],
               filename: "index2.html",
               title: "page2",
               template: "./src/index2.html"
           })
       ],
       watch: true,
       watchOptions: {
           poll: 1000, // 每秒询问多少次
           aggregateTimeout: 500,  //防抖 多少毫秒后再次触发
           ignored: /node_modules/ //忽略时时监听
       }
       devServer: {
           contentBase: path.resolve(__dirname, "dist"),
           host: "localhost",
           port: "8090",
           open: true, // 开启浏览器
           hot: true   // 开启热更新
       },
       // 提取js，lib1名字可改
       optimization: {
           splitChunks: {
               cacheGroups: {
                   lib1: {
                       chunks: "initial",
                       name: "jquery",
                       enforce: true
                   }
               }
           }
       }
   
   }
   

   • treeShaking

     • 描述

       解析js代码得出语法树，在保持代码运行结果不变的前提下，去除无用的代码(没有执行的代码，如不可能进入的if分支，return后的代码，声明后没用的变量)，使用的是编译原理中提到的DCE(dead code eliminnation)

       Tree-shaking是依赖ES6模块静态分析的，因为ES6 module只能作为模块顶层的语句出现，import 的模块名只能是字符串常量，import 绑定是不可改变的，依赖关系确定，与运行时无关

     • 使用

       使用插件压缩代码即可new webpack.optimize.UglifyJsPlugin()

   • HappyPack(webpack4后不再维护，使用thread-loader替代，见“vue简结”-“注意或优化的地方”-“webpack(vue.config.js)”-“parallel”)

     由于运行在 Node.js 之上的 Webpack 是单线程模型的，所以Webpack 需要处理的事情需要一件一件的做，不能多件事一起做。我们需要Webpack 能同一时间处理多个任务，发挥多核 CPU 电脑的威力，HappyPack 就能让 Webpack 做到这点，它把任务分解给多个子进程去并发的执行，子进程处理完后再把结果发送给主进程，从而减少了总的构建时间。

     • 样例
     javascript

     const path = require('path');
     const ExtractTextPlugin = require('extract-text-webpack-plugin');
     const HappyPack = require('happypack');
     
     module.exports = {
         module: {
             rules: [
                 {
                     test: /\.js$/,
                     // 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
                     use: [[happypack/loader?id=babel'],
                     // 排除 node_modules 目录下的文件，node_modules 目录下的文件都是采用的 ES5 语法，没必要再通过 Babel 去转换
                     exclude: path.resolve(__dirname, 'node_modules'),
                 },
                 {
                     // 把对 .css 文件的处理转交给 id 为 css 的 HappyPack 实例
                     test: /\.css$/,
                     use: ExtractTextPlugin.extract({
                         use: [[happypack/loader?id=css'],
                     }),
                 }
             ]
         },
         plugins: [
             new HappyPack({
                 // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
                 id: 'babel',
                 // 如何处理 .js 文件，用法和 Loader 配置中一样
                 loaders: [[babel-loader?cacheDirectory'],
                 // ... 其它配置项
             }),
             new HappyPack({
                 id: 'css',
                 // 如何处理 .css 文件，用法和 Loader 配置中一样
                 loaders: [[css-loader'],
             }),
             new ExtractTextPlugin({
                 filename: `[name].css`,
             }),
         ],
     };
     

     • 注意

       • 在 Loader 配置中，所有文件的处理都交给了 happypack/loader 去处理，使用紧跟其后的 querystring ?id=babel 去告诉 happypack/loader 去选择哪个 HappyPack 实例去处理文件。

       • 在 Plugin 配置中，新增了两个 HappyPack 实例分别用于告诉 happypack/loader 去如何处理 .js 和 .css 文件。选项中的 id 属性的值和上面 querystring 中的 ?id=babel 相对应，选项中的 loaders 属性和 Loader 配置中一样。

     • 参数

       • id: String 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
       • loaders: Array 用法和 webpack Loader 配置中一样
       • threads: Number 代表开启几个子进程去处理这一类型的文件，默认是3个，类型必须是整数
       • verbose: Boolean 是否允许 HappyPack 输出日志，默认是 true
       • threadPool: HappyThreadPool 代表共享进程池，即多个 HappyPack 实例都使用同一个共享进程池中的子进程去处理任务，以防止资源占用过多
       • verboseWhenProfiling: Boolean 开启webpack --profile ,仍然希望HappyPack产生输出
       • debug: Boolean 启用debug 用于故障排查。默认 false

   • DllPlugin和DllReferencePlugin

     每当修改了业务代码之后，一些第三方的，体积比较大的模块（比如 vue、echarts、axios等）也会被重新打包，极大的浪费了时间。这时我们就可以使用 DLL 预先把一些第三方模块提前打包，以后修改业务代码再构建时就不会构建这些模块了。

   • splitChunks

     有些库包会比较大，如果一起打包的话会导致文件过大，所以应该利用浏览器的并发数，把大文件拆开来，webpack4主要使用的是splitChunks配置,用来抽取公共代码

     vue配置见“vue简结”-“注意或优化的地方”-“webpack(vue.config.js)”-“splitChunks”

     默认配置

     javascript

     {
         "chunks": "all",//all, async(相当于import异步拆分打包的内容), initial(entry的配置) 三选一, 插件作用的chunks范围
         "minSize": 0,//最小尺寸
         "misChunks": 1,//最小chunks
         "maxAsyncRequests": 1,//最大异步请求chunks
         "maxInitialRequests": 1,//最大初始化chunks
         "name": undefined,//split 的 chunks name
         "automaticNameDelimiter": "~",//如果不指定name，自动生成name的分隔符（‘runtime~[name]’）
         "filename": undefined,
         "cacheGroups": {}//缓存组
     }
     

   • webpack热更新原理

     

     • 概念

       webpack的热更新又称热替换（Hot Module Replacement），缩写为HMR。 这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。

     • 流程

       1. webpack监听文件变化，重新打包

          在 webpack 的 watch 模式下，文件系统中某一个文件发生修改，webpack 监听到文件变化，根据配置文件对模块重新编译打包，并将打包后的代码通过简单的 JavaScript 对象保存在内存中。

       2. webpack-dev-server中间件调用webpack的api将代码打包到内存

          webpack-dev-server 和 webpack 之间的接口交互，而在这一步，主要是 dev-server 的中间件 webpack-dev-middleware 和 webpack 之间的交互，webpack-dev-middleware 调用 webpack 暴露的 API对代码变化进行监控，并且告诉 webpack，将代码打包到内存中。

       3. webpack-dev-server监听配置文件夹中静态文件的变化，通知浏览器刷新

          webpack-dev-server 对文件变化的一个监控，这一步不是监控代码变化重新打包。当在配置文件中配置了devServer.watchContentBase 为 true 的时候，Server 会监听这些配置文件夹中静态文件的变化，变化后会通知浏览器端对应用进行 live reload。注意，这儿是浏览器刷新，和 HMR 是两个概念。

       4. webpack-dev-server建立浏览器端和服务端的websocket，浏览器根据传来的webpack打包信息、文件变化信息、新模块hash值，进行后续操作

          也是 webpack-dev-server 代码的工作，该步骤主要是通过 sockjs（webpack-dev-server 的依赖）在浏览器端和服务端之间建立一个 websocket 长连接，将 webpack 编译打包的各个阶段的状态信息告知浏览器端，同时也包括第三步中 Server 监听静态文件变化的信息。浏览器端根据这些 socket 消息进行不同的操作。当然服务端传递的最主要信息还是新模块的 hash 值，后面的步骤根据这一 hash 值来进行模块热替换。

       5. webpack根据传来的信息进行模块热更新

          webpack-dev-server/client 端并不能够请求更新的代码，也不会执行热更模块操作，而把这些工作又交回给了 webpack，webpack/hot/dev-server 的工作就是根据 webpack-dev-server/client 传给它的信息以及 dev-server 的配置决定是刷新浏览器呢还是进行模块热更新。当然如果仅仅是刷新浏览器，也就没有后面那些步骤了。

       6. HMR接收到之前的hash值，通过ajax拿到所有要更新模块的hash值列表，再通过jsonp获取最新代码

          HotModuleReplacement.runtime 是客户端 HMR 的中枢，它接收到上一步传递给他的新模块的 hash 值，它通过 JsonpMainTemplate.runtime 向 server 端发送 Ajax 请求，服务端返回一个 json，该 json 包含了所有要更新的模块的 hash 值，获取到更新列表后，该模块再次通过 jsonp 请求，获取到最新的模块代码。这就是上图中 7、8、9 步骤。

       7. Plugin进行模块新旧对比，包括更新模块的依赖项，决定更新的模块

          决定 HMR 成功与否的关键步骤，在该步骤中，HotModulePlugin 将会对新旧模块进行对比，决定是否更新模块，在决定更新模块后，检查模块之间的依赖关系，更新模块的同时更新模块间的依赖引用。

       8. HMR 失败，刷新浏览器

          当 HMR 失败后，回退到 live reload 操作，也就是进行浏览器刷新来获取最新打包代码。

   • webpack热更新失效问题

     路径设置正确，devServer开启了hot，plugin加了HMU，每次改变文件都能看到打印信息，但是页面没变。

     原理：热更新对devServer端口内的内容有效，项目端口里的文件不生效

     解决：配合使用htmlWebpackPlugin，自动生成html模板以便查看js和css路径是否正确，在项目端口页面引用devServer的js和css

     javascript

     const path = require('path');
     const root_path = path.resolve(__dirname);
     const HtmlWebpackPlugin = require('html-webpack-plugin');
     const CleanWebpackPlugin = require('clean-webpack-plugin');
     const ExtractTextPlugin = require('extract-text-webpack-plugin');
     const webpack = require('webpack');
     
     module.exports = {
       // mode: 'production',
       mode: "development",
       devServer: {
         contentBase: './',
         hot: true,
         port: 9000,
         open: true
       },
       entry: {  //配置多个入口文件打包成多个代码块
         index: path.resolve(root_path, 'js/index.js')
       },
       output: {
         filename: '[name].min.js',
         path: path.resolve(root_path, 'minjs')
       },
       module: {
         rules: [
           {
             test: /\.js$/,
             loader: 'babel-loader',
             exclude: path.resolve(root_path, 'node_modules'),
             include: root_path
           },
           {
             test: /\.scss/,
             use: ExtractTextPlugin.extract({
               fallback: 'style-loader',
               use: [[css-loader', 'sass-loader']
             })
           }
         ]
       },
       watch: true,
       watchOptions: {
           poll: 1000, // 每秒询问多少次
           aggregateTimeout: 500,  //防抖 多少毫秒后再次触发
           ignored: /node_modules/ //忽略时时监听
       }
       plugins: [
         new HtmlWebpackPlugin({
           title: 'Hot Module Replacement'
         }),
         new webpack.NamedModulesPlugin(),
         new webpack.HotModuleReplacementPlugin(),
         new ExtractTextPlugin({
           filename: 'mincss/[name].min.css',
           allChunks: true
         })
       ]
     }
     

   • js打包文件监听(热打包)

     1. watch(需刷新浏览器)

     package.json

     javascript

     {
       // ...
       "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "build": "webpack",
         "watch": "webpack --watch" // 新增配置
       }
       // ...
     }
     

     2. webpack-dev-server

     package.json

     javascript

     {
       // ...
       "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "build": "webpack",
         "dev": "webpack-dev-server --open" // 新增配置，运行 npm run dev 会自动打开浏览器
       }
       // ...
     }
     

     webpack.config.js

     javascript

     'use strict'
     
     const path = require('path');
     var webpack = require('webpack');  // 引进 webpack
     module.exports = {
       // ...
       mode:'development', // production 改为开发环境，因为只有开发环境才用到热更新
       module:{
       // ...
       },
       plugins:[
         new webpack.HotModuleReplacementPlugin()
       ],
       devServer:{
         contentBase:'./dist',
         hot: true
       }
     }
     

   • webpack文件的构建

     • entry: 入口文件
     • resolve: 文件路径指向(可加快打包过程)
     • output: 输出文件
     • module: 在webpack中一个模块对应一个文件。webpack会从entry开始，递归找出所有依赖的模块
       • rules
         • test: 匹配的文件名正则
         • use
           • loader: 模块转换器，用于将模块的原内容按照需求转换成新内容
           • option: 选项
     • plugins: 拓展插件解决loader无法完成的事，如压缩

   • webpack执行

     1. 初始化参数

        1. 从配置文件(默认webpack.config.js)和shell语句中读取与合并参数，得出最终的参数
        2. 实例化Compiler
        3. 依次调用插件的apply方法，让插件可以监听后续的所有事件节点。同时向插件中传入compiler实例的引用，以方便插件通过compiler调用webpack的api
        4. 应用文件系统到compiler对象
        5. 读取配置的Entrys,为每个Entry实例化一个对应的EntryPlugin
        6. 调用完所有内置的和配置的插件的apply方法
        7. 根据配置初始化resolver,resolver负责在文件系统中寻找指定路径的文件

     2. 开始编译

        用上一步得到的参数初始化Comiler对象，加载所有配置的插件，通过执行对象的run方法开始执行编译

     3. 确定入口

        根据配置中的entry找出所有的入口文件

     4. 编译模块

        1. 启动一次编译
        2. 在监听模式下启动编译，文件发生变化会重新编译
        3. 告诉插件一次新的编译将要启动，同时会给插件带上compiler对象
        4. 检测到文件变化，便有一次新的compilation被创建，对象包含了当前的模块资源、编译生成资源、变化的文件等，提供事件回调给插件进行拓展
        5. 新的compilation对象创建完毕后，从entry开始读取文件,根据文件类型和编译的loader对文件进行编译,编译完后再找出该文件依赖的文件,递归地编译和解析
           1. 使用相应的Loader去转换一个模块
           2. 使用acorn解析转换后的内容，输出对应的抽象语法树
           3. 分析其AST,当遇到require等导入其他模块的语句时，便将其加入依赖的模块列表中，同时对于新找出来的模块递归分析，最终弄清楚所有模块的依赖关系
           4. 所有模块及依赖的模块都通过Loader转换完成，根据依赖关系生成Chunk
        6. 一次compilation执行完成
        7. 当遇到错误会触发改事件,该事件不会导致webpack退出

     5. 完成编译模块

        经过第四步之后，得到了每个模块被翻译之后的最终内容以及他们之间的依赖关系

     6. 输出资源

        1. 所有需要输出的文件已经生成,询问插件有哪些文件需要输出,有哪些不需要输出
        2. 确定好要输出哪些文件后,执行文件输出
        3. 文件输出完毕
        4. 成功完成一次完整的编译和输出流程
        5. 如果在编译和输出中出现错误,导致webpack退出,就会直接跳转到本步骤,插件可以在本事件中获取具体的错误原因

     7. 输出完成

        在确定好输出内容后，根据配置(webpack.config.js && shell)确定输出的路径和文件名，将文件的内容写入文件系统中(fs)

     webpack会在特定的时间点广播特定的事件，插件监听事件并执行相应的逻辑，并且插件可以调用webpack提供的api改变webpack的运行结果

   • webpack编写plugins

     • 新建项目

       1. npm init -y
       2. npm install webpack webpack-cli --save-dev
       3. 新建文件夹src，index.js
       4. index.js
       javascript

       console.log('hello world');
       webpack.config.js
       

       5. webpack.config.js
       javascript

       const path = require('path');
       
       module.exports = {
       　　mode: 'development',
       　　entry: {
       　　　　main: './src/index.js'
       　　},
       　　output: {
       　　　　path: path.resolve(__dirname, 'dist'),
       　　　　filename: '[name].js'
       　　}
       }
       

       6. package.json
       javascript

       "scripts": {
          "debug": "node --inspect --inspect-brk node_modules/webpack/bin/webpack.js",
       　　"build": "webpack"
       }
       

     • 插件样例(dist下生成版权信息的js)

       1. 根目录下新建文件夹plugins
       2. 新建js叫copyright-webpack-plugin.js
          javascript

          //loader是一个函数，插件是一个类
          class CopyrightWebpackPlugin {
          　　constructor(){
          　　　　console.log('插件被使用了')
          　　}
              //compiler是webpack的一个实例，这个实例存储了webpack各种信息，所有打包信息
              //https://webpack.js.org/api/compiler-hooks
              //hooks是钩子，里面定义了时刻值
          　　apply(compiler) {
              　　//用到了hooks，emit这个时刻，在输出资源之前，是一个异步函数
              　　//compilation是这一次的打包信息，所以跟compiler是不一样的
              　　//tapAsync接受两个参数，第一个是名字，
              　　compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin',(compilation, cb)=>{
              　　　　debugger;
              　　　　compilation.assets[[copyright.txt'] = {
              　　　　　　source: function(){
              　　　　　　　　return 'copyright by q'
              　　　　　　},
              　　　　　　size: function() {
              　　　　　　　　return 15
              　　　　　　}
              　　　　};
              　　　　// 最后一定要调用cb
              　　　　cb();
              　　})
              　　//同步的时刻，后面只要一个参数就可以了
              　　compiler.hooks.compile.tap('CopyrightWebpackPlugin',(compilation) => {
              　　　　console.log('compiler');
              　　})
          　　}
          }
          module.exports = CopyrightWebpackPlugin;
          

       3. 在webpack.config.js使用
          javascript

          const CopyRightWebpackPlugin = require('./plugins/copyright-webpack-plugin');
          module.exports = {
          　　plugins: [
          　　　　//插件要new的原因
          　　　　new CopyRightWebpackPlugin()
          　　],
          }
          

   • webpack编写loader

     • 开发前注意

       1. 单一职责

          一个 loader 只做一件事

       2. 链式组合

          一次干5件事的loader ，不如5个只能干一件事的loader

       3. 模块化

          module.export=...

       4. 无状态

          loader间保持独立

       5. 使用 Loader 实用工具

          loader-utils、schema-utils

       6. loader 的依赖

          外部资源必须声明，并引入依赖

          javascript

          import path from 'path';
          
          export default function(source) {
              var callback = this.async();
              var headerPath = path.resolve('header.js');
          
              this.addDependency(headerPath);
          
              fs.readFile(headerPath, 'utf-8', function(err, header) {
                  if(err) return callback(err);
                  //这里的 callback 相当于异步版的 return
                  callback(null, header + "\n" + source);
              });
          };
          

       7. 代码公用

          共用代码提取到一个运行时文件里，然后通过 require 把它引进每个 loader

       8. 绝对路径

          不要在 loader 模块里写绝对路径，当项目根路径变了，会干扰 webpack 计算 hash。loader-utils 里有一个 stringifyRequest 方法，它可以把绝对路径转化为相对路径。

       9. 同伴依赖

          开发的 loader 只是简单包装另外一个包，应该在 package.json 中将这个包设为同伴依赖peerDependency。这可以让应用开发者知道该指定哪个具体的版本。

          javascript

          "peerDependencies": {
              "node-sass": "^4.0.0"
          }
          

     • 实践(html-minify-loader)

       1. 创建 loader 的 文件

          src/loaders/html-minify-loader.js

       2. 配置 webpack.config.js

          javascript

          module: {
              rules: [{
                  test: /\.html$/,
                  use: [[html-loader', 'html-minify-loader'] // 处理顺序 html-minify-loader => html-loader => webpack
              }]
          },
          resolveLoader: {
              // 因为 html-loader 是开源 npm 包，所以这里要添加 'node_modules' 目录
              modules: [path.join(__dirname, './src/loaders'), 'node_modules']
          }
          

       3. 示例 html 和 js 来测试

          src/example.html

          html

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <meta http-equiv="X-UA-Compatible" content="ie=edge">
              <title>Document</title>
          </head>
          <body>
          
          </body>
          </html>
          

          src/app.js

          javascript

          var html = require('./expamle.html');
          console.log(html);
          

       4. 处理 src/loaders/html-minify-loader.js

          loader 是一个 node 模块，它导出一个函数，该函数的参数是 require 的源模块，处理 source 后把返回值交给下一个 loader

          javascript

          module.exports = function (source) {
              // 处理 source ...
              return handledSource;
          }
          

          或

          javascript

          module.exports = function (source) {
              // 处理 source ...
              this.callback(null, handledSource)
              return handledSource;
          }
          

          如果是处理顺序排在最后一个的 loader，那么它的返回值将最终交给 webpack 的 require，它一定是一个 node 模块的可执行的 JS 脚本。

          javascript

          // 处理顺序排在最后的 loader
          module.exports = function (source) {
              // 这个 loader 的功能是把源模块转化为字符串交给 require 的调用方
              return 'module.exports = ' + JSON.stringify(source);
          }
          

          使用 minimize 这个库来完成核心的压缩功能,loader-utils配置获取参数

          javascript

          var Minimize = require('minimize');
          var loaderUtils = require('loader-utils');
          
          module.exports = function(source) {
              var callback = this.async();//loader 写成异步的方式，这样不会阻塞其他编译进度
              if (this.cacheable) {
                  this.cacheable();
              }
              var opts = loaderUtils.getOptions(this) || {};//这里拿到 webpack.config.js 的 loader 配置
              var minimize = new Minimize(opts);
              minimize.parse(source, callback);
          };
          

          webpack.config.js 中设置传入参数

          javascript

          module: {
              rules: [{
                  test: /\.html$/,
                  use: [[html-loader', {
                      loader: 'html-minify-loader',
                      options: {
                          comments: false
                      }
                  }]
              }]
          },
          resolveLoader: {
              modules: [path.join(__dirname, './src/loaders'), 'node_modules']
          }
          

   • webpack 编译 import

     import moduleName from 'xxModule'和import('xxModule')经过webpack编译打包后最终变成了什么？在浏览器中是怎么运行的？

     import经过webpack打包以后变成一些Map对象，key为模块路径，value为模块的可执行函数；

     代码加载到浏览器以后从入口模块开始执行，其中执行的过程中，最重要的就是webpack定义的__webpack_require__函数，负责实际的模块加载并执行这些模块内容，返回执行结果，其实就是读取Map对象，然后执行相应的函数；

     当然其中的异步方法（import('xxModule')）比较特殊一些，它会单独打成一个包，采用动态加载的方式，具体过程：当用户触发其加载的动作时，会动态的在head标签中创建一个script标签，然后发送一个http请求，加载模块，模块加载完成以后自动执行其中的代码，主要的工作有两个，更改缓存中模块的状态，另一个就是执行模块代码。

     javascript

     (function (modules) {
       // 插入script，异步请求，chunkid等函数
     })({
         // src/index.js 模块
         "./src/index.js":
           (function (module, __webpack_exports__, __webpack_require__) {
             "use strict";
             __webpack_require__.r(__webpack_exports__);
             var _num_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/num.js");
             Object(_num_js__WEBPACK_IMPORTED_MODULE_0__["print"])()
             function button() {
               const button = document.createElement('button')
               const text = document.createTextNode('click me')
               button.appendChild(text)
               button.onclick = e => __webpack_require__.e(0)
                 .then(__webpack_require__.bind(null, "./src/info.js"))
                 .then(res => {
                   console.log(res.log)
                 })
               return button
             }
             document.body.appendChild(button())
             //# sourceURL=webpack:///./src/index.js?");
           }),
     
         // ./src/num.js 模块
         "./src/num.js":
           (function (module, __webpack_exports__, __webpack_require__) {
             "use strict";
             __webpack_require__.r(__webpack_exports__);
             __webpack_require__.d(__webpack_exports__, "print", function () { return print; });
             var _tmp_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/tmp.js");
             function print() {
               Object(_tmp_js__WEBPACK_IMPORTED_MODULE_0__["tmpPrint"])()
               console.log('我是 num.js 的 print 方法')
             }
             //# sourceURL=webpack:///./src/num.js?");
           })
     })
     

     完整：

     javascript

     /**
     * modules = {
     *  './src/index.js': function () {},
     *  './src/num.js': function () {},
     *  './src/tmp.js': function () {}
     * }
     */
     (function (modules) { // webpackBootstrap
       /**
       * install a JSONP callback for chunk loading
       * 模块加载成功，更改缓存中的模块状态，并且执行模块内容
       * @param {*} data = [
       *  [chunkId],
       *  {
       *    './src/info.js': function () {}
       *  }
       * ]
       */
       function webpackJsonpCallback(data) {
         var chunkIds = data[0];
         var moreModules = data[1];
     
     
         // add "moreModules" to the modules object,
         // then flag all "chunkIds" as loaded and fire callback
         var moduleId, chunkId, i = 0, resolves = [];
         for (; i < chunkIds.length; i++) {
           chunkId = chunkIds[i];
           if (Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {
             resolves.push(installedChunks[chunkId][0]);
           }
           // 这里将模块的加载状态改为了 0，表示加载完成
           installedChunks[chunkId] = 0;
         }
         for (moduleId in moreModules) {
           if (Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {
             // 执行模块代码
             modules[moduleId] = moreModules[moduleId];
           }
         }
         if (parentJsonpFunction) parentJsonpFunction(data);
     
         while (resolves.length) {
           resolves.shift()();
         }
     
       };
     
     
       // The module cache, 模块缓存，类似于 commonJS 的 require 缓存机制，只不过这里的 key 是相对路径
       var installedModules = {};
     
     
       /**
       * 定义 chunk 的加载情况，比如 main = 0 是已加载
       * object to store loaded and loading chunks
       * undefined = chunk not loaded
       * null = chunk preloaded/prefetched
       * Promise = chunk loading
       * 0 = chunk loaded
       */
       var installedChunks = {
         "main": 0
       };
     
     
     
       // script path function， 返回需要动态加载的 chunk 的路径
       function jsonpScriptSrc(chunkId) {
         return __webpack_require__.p + "" + chunkId + ".main.js"
       }
     
       /**
       * The require function
       * 接收一个 moduleId，其实就是一个模块相对路径，然后查缓存（没有则添加缓存），
       * 然后执行模块代码，返回模块运行后的 module.exports
       * 一句话总结就是 加载指定模块然后执行，返回执行结果（module.exports)
       * 
       * __webpack_require__(__webpack_require__.s = "./src/index.js")
       */
       function __webpack_require__(moduleId) {
     
         // Check if module is in cache
         if (installedModules[moduleId]) {
           return installedModules[moduleId].exports;
         }
         /**
         * Create a new module (and put it into the cache)
         * 
         * // 示例
         * module = installedModules[[./src/index.js'] = {
         *  i: './src/index.js',
         *  l: false,
         *  exports: {}
         * }
         */
         var module = installedModules[moduleId] = {
           i: moduleId,
           l: false,
           exports: {}
         };
     
         /**
         * Execute the module function
         * modules[[./src/index.js'] is a function
         */
         modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
     
         // Flag the module as loaded
         module.l = true;
     
         // Return the exports of the module
         return module.exports;
       }
     
       // This file contains only the entry chunk.
       // The chunk loading function for additional chunks
       /**
       * 
       */
       __webpack_require__.e = function requireEnsure(chunkId) {
         var promises = [];
     
         // JSONP chunk loading for javascript
     
         // 从缓存中找该模块
         var installedChunkData = installedChunks[chunkId];
         
         // 0 means "already installed".
         if (installedChunkData !== 0) { 
           
           // 说明模块没有安装
     
           // a Promise means "currently loading".
           if (installedChunkData) {
             promises.push(installedChunkData[2]);
           } else {
             // setup Promise in chunk cache
             var promise = new Promise(function (resolve, reject) {
               installedChunkData = installedChunks[chunkId] = [resolve, reject];
             });
             promises.push(installedChunkData[2] = promise);
     
             // start chunk loading, create script element
             var script = document.createElement('script');
             var onScriptComplete;
     
             script.charset = 'utf-8';
             // 设置超时时间
             script.timeout = 120;
             if (__webpack_require__.nc) {
               script.setAttribute("nonce", __webpack_require__.nc);
             }
             // script.src = __webpack_public_path__ + chunkId + main.js, 即模块路径
             script.src = jsonpScriptSrc(chunkId);
     
             // create error before stack unwound to get useful stacktrace later
             var error = new Error();
     
             // 加载结果处理函数
             onScriptComplete = function (event) {
               // avoid mem leaks in IE.
               script.onerror = script.onload = null;
               clearTimeout(timeout);
               var chunk = installedChunks[chunkId];
               if (chunk !== 0) {
                 // chunk 状态不为 0 ，说明加载出问题了
                 if (chunk) {
                   var errorType = event && (event.type === 'load' ? 'missing' : event.type);
                   var realSrc = event && event.target && event.target.src;
                   error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
                   error.name = 'ChunkLoadError';
                   error.type = errorType;
                   error.request = realSrc;
                   chunk[1](error);
                 }
                 installedChunks[chunkId] = undefined;
               }
             };
             // 超时定时器，超时以后执行
             var timeout = setTimeout(function () {
               onScriptComplete({ type: 'timeout', target: script });
             }, 120000);
             // 加载出错或者加载成功的处理函数
             script.onerror = script.onload = onScriptComplete;
             // 将 script 标签添加到 head 标签尾部
             document.head.appendChild(script);
           }
         }
         return Promise.all(promises);
       };
     
       // expose the modules object (__webpack_modules__)
       __webpack_require__.m = modules;
     
       // expose the module cache
       __webpack_require__.c = installedModules;
     
       /**
       * define getter function for harmony exports
       * @param {*} exports = {}
       * @param {*} name = 模块名
       * @param {*} getter => 模块函数
       * 
       * 在 exports 对象上定义一个 key value，key 为模块名称，value 为模块的可执行函数
       * exports = {
       *  moduleName: module function
       * } 
       */
       __webpack_require__.d = function (exports, name, getter) {
         if (!__webpack_require__.o(exports, name)) {
           Object.defineProperty(exports, name, { enumerable: true, get: getter });
         }
       };
     
       /**
       * define __esModule on exports
       * @param {*} exports = {}
       * 
       * exports = {
       *  __esModule: true
       * }
       */
       __webpack_require__.r = function (exports) {
         if (typeof Symbol !== 'undefined' && Symbol.toStringTag) {
           Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
         }
         Object.defineProperty(exports, '__esModule', { value: true });
       };
     
       // create a fake namespace object
       // mode & 1: value is a module id, require it
       // mode & 2: merge all properties of value into the ns
       // mode & 4: return value when already ns object
       // mode & 8|1: behave like require
       __webpack_require__.t = function (value, mode) {
         if (mode & 1) value = __webpack_require__(value);
         if (mode & 8) return value;
         if ((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
         var ns = Object.create(null);
         __webpack_require__.r(ns);
         Object.defineProperty(ns, 'default', { enumerable: true, value: value });
         if (mode & 2 && typeof value != 'string') for (var key in value) __webpack_require__.d(ns, key, function (key) { return value[key]; }.bind(null, key));
         return ns;
       };
     
       // getDefaultExport function for compatibility with non-harmony modules
       __webpack_require__.n = function (module) {
         var getter = module && module.__esModule ?
           function getDefault() { return module[[default']; } :
           function getModuleExports() { return module; };
         __webpack_require__.d(getter, 'a', getter);
         return getter;
       };
     
       // Object.prototype.hasOwnProperty.call
       __webpack_require__.o = function (object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
     
       // __webpack_public_path__
       __webpack_require__.p = "";
     
       // on error function for async loading
       __webpack_require__.oe = function (err) { console.error(err); throw err; };
       
       /**
       * 通过全局属性存储异步加载的资源项，打包文件首次加载时如果属性值不为空，则说明已经有资源被加载了，
       * 将这些资源同步到installedChunks对象中，避免资源重复加载，当然也是这句导致微应用框架single-spa中的所有子应用导出的
       * 包名需要唯一，否则一旦异步的重名模块存在，重名的后续模块不会被加载，且显示的资源是第一个加载的重名模块，
       * 也就是所谓的JS全局作用域的污染
       *
       * 其实上面说的这个问题，webpack官网已经提到了
       * https://webpack.docschina.org/configuration/output/#outputjsonpfunction
       */
       var jsonpArray = window["webpackJsonp"] = window["webpackJsonp"] || [];
       var oldJsonpFunction = jsonpArray.push.bind(jsonpArray);
       jsonpArray.push = webpackJsonpCallback;
       jsonpArray = jsonpArray.slice();
       for (var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);
       var parentJsonpFunction = oldJsonpFunction;
     
     
       /**
       * 入口位置
       * Load entry module and return exports
       */
       return __webpack_require__(__webpack_require__.s = "./src/index.js");
     })
       ({
         // 代码中所有的 import moduleName from 'xxModule' 变成了以下的 Map 对象
     
         // /src/index.js 模块
         "./src/index.js":
           /**
           * @param module = {
           *  i: './src/index.js',
           *  l: false,
           *  exports: {}
           * 
           * @param __webpack_exports__ = module.exports = {}
           * 
           * @param __webpack_require__ => 自定义的 require 函数，加载指定模块，并执行模块代码，返回执行结果
           * 
           */
           (function (module, __webpack_exports__, __webpack_require__) {
             "use strict";
             /**
             * 
             * define __esModule on exports
             * __webpack_exports = module.exports = {
             *  __esModule: true
             * }
             */
             __webpack_require__.r(__webpack_exports__);
             // 加载 ./src/num.js 模块
             var _num_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/num.js");
             Object(_num_js__WEBPACK_IMPORTED_MODULE_0__["print"])()
             function button() {
               const button = document.createElement('button')
               const text = document.createTextNode('click me')
               button.appendChild(text)
               /**
               * 异步执行部分
               */
               button.onclick = e => __webpack_require__.e(0)
                 // 模块异步加载完成后，开始执行模块内容 => window["webpackJsonp"].push = window["webpackJsonp"].push = function (data) {}
                 .then(__webpack_require__.bind(null, "./src/info.js"))
                 .then(res => {
                   console.log(res.log)
                 })
               return button
             }
             document.body.appendChild(button())
             //# sourceURL=webpack:///./src/index.js?");
           }),
     
         // /src/num.js 模块
         "./src/num.js":
           /**
           * @param module = {
           *  i: './src/num.js',
           *  l: false,
           *  exports: {}
           * 
           * @param __webpack_exports__ = module.exports = {}
           * 
           * @param __webpack_require__ => 自定义的 require 函数，加载指定模块，并执行模块代码，返回执行结果
           * 
           */
           (function (module, __webpack_exports__, __webpack_require__) {
             "use strict";
             /**
             * 
             * define __esModule on exports
             * __webpack_exports = module.exports = {
             *  __esModule: true
             * }
             */
             __webpack_require__.r(__webpack_exports__);
             /**
             * module.exports = {
             *  __esModule: true,
             *  print
             * }
             */
             __webpack_require__.d(__webpack_exports__, "print", function () { return print; });
             // 加载 ./src/tmp.js 模块
             var _tmp_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("./src/tmp.js");
             function print() {
               Object(_tmp_js__WEBPACK_IMPORTED_MODULE_0__["tmpPrint"])()
               console.log('我是 num.js 的 print 方法')
             }
             //# sourceURL=webpack:///./src/num.js?");
           }),
     
         // /src/tmp.js 模块
         "./src/tmp.js":
           /**
           * @param module = {
           *  i: './src/num.js',
           *  l: false,
           *  exports: {}
           * 
           * @param __webpack_exports__ = module.exports = {}
           * 
           * @param __webpack_require__ => 自定义的 require 函数，加载指定模块，并执行模块代码，返回执行结果
           * 
           */
           (function (module, __webpack_exports__, __webpack_require__) {
     
             "use strict";
             /**
             * 
             * define __esModule on exports
             * __webpack_exports = module.exports = {
             *  __esModule: true
             * }
             */
             __webpack_require__.r(__webpack_exports__);
             /**
             * module.exports = {
             *  __esModule: true,
             *  tmpPrint
             * }
             */
             __webpack_require__.d(__webpack_exports__, "tmpPrint", function () { return tmpPrint; });
             function tmpPrint() {
               console.log('tmp.js print')
             }
             //# sourceURL=webpack:///./src/tmp.js?");
           })
       });