Webpack

工具

npm intasll webpack webpack-cli（可以在命令行中使用webpack命令）
npm i ..@版本号
npm info webpack
npx webpack -v(文件内查看版本信息，不建议-g全局安装webpack)

模块化

CommonJS规范:

导出：module.exports  = 变量，对象;
导入：const xx = require('路径')

ES6语言级的模块系统:

import  obj as name from ('')/  export name as name2
export default{}
具名导出需要{}导入 ，默认导出 不需要{}
export .. from ('')      
 //动态引入，返回一个Promise对象，运行时才执行，属于异步加载
 import() 常见写法：() => import('...')

区别：https://zhuanlan.zhihu.com/p/113009496

• CommonJS 模块输出的是一个值的拷贝(基础类型的复制和引用类型的浅拷贝)(可以被缓存起来，下次require就直接调用)，ES6 模块直接输出的是值的引用

  • 所以，CommonJS模块被导出后，模块内对基础数据类型的更改就影响不到导出后的模块，因为是被复制缓存下来的。并不是浅拷贝或者导出引用。定义一个getter函数来return模块中原始值，定义一个setter函数进行更改原始值
    

    //如何解决让CommonJS导出的模块也能改变其内部变量
    var counter = 3;
    function incCounter() {
    counter++;
    }
    module.exports = {
    get counter() {
        return counter
    },
    incCounter: incCounter,
    };

  
  

• CommonJS 模块是运行时加载 (正因为同步加载，所以在浏览器环境中会造成阻塞)，ES6 模块是编译时输出接口(ES6 Module 的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及导入和导出的变量，也就是所谓的"编译时加载"。，正因为如此，import 命令具有提升效果，且不能使用变量或表达式，因为这是运行时候才能得到结果)。
  
  
• CommonJs 是单个值导出(module.exports:exports是module.exports的引用，如果exports没有重赋值，则二者没有任何区别)，ES6Module可以导出多个(即导出多个接口，但我们引用的时候就比较麻烦，比如import ..(*) as .. from ...,如果我们导出时只定义一个默认接口，exports default{}就方便了 )
  
  
• CommonJs 是动态语法可以写在判断里，ES6 Module 静态语法只能写在顶层
  
  
• CommonJs 的 this 是当前模块，ES6 Module的 this 是 undefined

ES Module

• 一个模块就是一个文件。浏览器需要使用 <script type="module">以使 import/export 可以工作。ES模块（相较于常规脚本，比如webpack rollup打包出来的bundle.js,比如CommonJS模块都是普通脚本）有几点差别：
  
  • 默认是延迟解析的（deferred）
  • Async 可用于内联脚本。
  • 重复的外部脚本会被忽略
    
    
• 模块具有自己的本地顶级作用域，并可以通过 import/export 交换功能。
  
  
• 模块始终使用 use strict。
  
  
• 模块代码只执行一次。导出仅创建一次，然后会在导入之间共享。
  
  

• 现代浏览器会自动加载并解析脚本。

• 补充：动态import()语句返回一个promise，可以配合async使用。

webpack流程

构建工具(通过webpack(生成根文件下的dist目录)、webpack-dev-server（默认生成build/dist）打包)做以下这些事儿：

• ① 从一个打算放在 HTML 中的模块开始。
  
  
• ② 分析它的依赖：它的导入，以及它的导入的导入等。
  
  
• ③ 使用所有模块构建一个文件（或者多个文件），并用打包函数（bundler function）替代原生的 import 调用，以使其正常工作。还支持像 HTML/CSS 模块等“特殊”的模块类型。
  
  
• ④ 在处理过程中，可能会应用其他转换和优化：
  
  • 删除无法访问的代码。
  • 删除未使用的导出（“tree-shaking”）。
  • 删除特定于开发的像 console 和 debugger 这样的语句。
  • 可以使用 Babel 将前沿的现代的 JavaScript 语法转换为具有类似功能的旧的 JavaScript 语法。
  • 压缩生成的文件（删除空格，用短的名字替换变量等）。
    
    
• 如果我们使用打包工具，那么脚本会被打包进一个单一文件（或者几个文件）， 在这些脚本中的 import/export 语句会被替换成特殊的打包函数（bundler function）。因此，最终打包好的脚本中不包含任何 import/export，它也不需要 type="module"，我们可以将其放入常规的 <script>。

不同环境下的打包

• 开发环境的需求：　webpack-dev-server是一个小型的Node.js Express服务器,它使用webpack-dev-middleware来服务于webpack的包,除此自外，它还有一个通过Sock.js来连接到服务器的微型运行时（默认生成目录build/dist）
  
  • 模块热更新 （本地开启服务，实时更新）　
  • sourceMap (方便打包调试)　　　　
  • 接口代理　 (配置proxyTable解决开发环境中的跨域问题)　　　
  • 代码规范检查 (代码规范检查工具)　　
• 生产环境的需求：(生成根文件下的dist目录)　　
  
  • 提取公共代码　 　　 　　　　
  • 压缩混淆(压缩混淆代码，清除代码空格，注释等信息使其变得难以阅读)　　　
  • 文件压缩/base64编码(压缩代码，减少线上环境文件包的大小)　　　
  • 去除无用的代码 　　
• 开发环境和生产环境的共同需求：　　　　
  
  • 同样的入口　　　　
  • 同样的代码处理(loader处理)　　　　
  • 同样的解析配置

概念

• loader与plugin

  • loader: 是一个nodejs 函数模块， 传入resource file 或者sourceMap json 结果，读取文件，将文件处理为String 或者 Buffer 格式，然后传给compiler 或者下一个loader.

  • plugin: 是能够参与到compilation process的自定义函数，通过hook到每一个编译（compiler）中，触发关键事件或处理。

  • 如何自定义webpack插件：

    • JavaScript 命名函数
    • 在插件函数prototype 上定义一个apply 方法
    • 定义一个绑定到webpack 自身的hook
    • 处理webpack内部特定数据
    • 功能完成后调用webpack 提供的回调

• Babel

在webpack中借助babel-loader,项目中配置文件

//webpack.config.js
modules:{
   rules:[
        {test: /\.js$/,
        loader: "babel-loader",
        include: [
          resolve("src"),
          resolve("test"),
          resolve("node_modules/webpack-dev-server/client"),
        ],
        exclude:
        },
        ...]
}

• Tree Shaking(基于ES module，静态分析)

  • 不对没有exports接口的文件进行打包编译，因为在编译时就要确定依赖关系，所以只支持ES Module引入方式
  • 只处理顶层的通过import/export语法的函数或变量，不能把没用到的类方法消除掉
  • js的动态语言特性使得静态分析比较困难
  • 开发环境下tree shaking无实际效果，仍会保留代码，便于调试
  • 生产环境

//webpack.prod.conf.js
optimization:{
    usedExports: true;//可以不写，mode:production 自动treeshaking
}
//package.json
sideEffects:['@babel/polly-fill'，'*.css']//没有exports属性但被某些模块引入的工具、文件，在这配置不被treeshaking
sideEffects:false;//所有文件都会被treeshaking

• 代码分离，通常有三种做法

  • 首先明白三个名词：module，chunk 和 bundle 其实就是同一份逻辑代码在不同转换场景下的取了三个名字
    
    • module:我们的项目文件目录/src的每一个文件相当于一个module
    • chunk: 当我们写的 module 源文件传到 webpack 进行打包时，webpack 会根据文件引用关系生成 chunk 文件，webpack 会对这个 chunk 文件进行一些操作；
    • bundle:webpack 处理好 chunk 文件后，最后会输出 bundle 文件，这个 bundle 文件包含了经过加载和编译的最终源文件，所以它可以直接在浏览器中运行
      
      
  • Bundle Splitting
    
    • ①webpack.config.js中手动配置多个entry
      
      • 将我们应用程序中的①静态文件或者不会怎么改动到的代码抽离出来成为新的module，为其配置打包入口，生成比原打包生成的bundle体积更小数量更多的bundle。
      • 缺点：入口处多个chunk之间重复引入的module仍然会被分别打包到各自的bundle中。
        
        
    • ②webpack.config.js中通过配置optimization.splitChunks(Webpack4.x)
      
      • SplitChunksPlugin 插件可以将公共的依赖模块(node_modules中的npm包)提取到已有的 entry chunk 中，或者提取到一个新生成的 chunk。
      • 解决了重复引入的问题。
        
        
    • 好处：
      
      • 利于浏览器并行下载bundle，提高下载速度
      • 运用浏览器缓存，只有代码被修改，文件名中的哈希值改变了才会去再次加载。
        
        
  • Code Splitting
    
    • ③在代码中采用动态导入，按需加载，ES6+的import()语法
    • 只加载用户需要的部分，其余的代码都遵从懒加载的策略
    • 将动态引入的module分离父module，自成一个chunk。

• 预取/预加载模块(Webpack4.6)(prefetch/preload module)

  • 在声明import()语句的时候加入
  • prefetch(预取)：将来某些导航下可能需要的资源
  • preload(预加载)：当前导航下可能需要资源
    
    • 区别：
    • preload chunk 会在父 chunk 加载时，以并行方式开始加载。prefetch chunk 会在父 chunk 加载结束后开始加载。
    • preload chunk 具有中等优先级，并立即下载。prefetch chunk 在浏览器闲置时下载。
    • preload chunk 会在父 chunk 中立即请求，用于当下时刻。prefetch chunk会用于未来的某个时刻。
    • 浏览器支持程度不同。

//...声明webpackChunkName为打包后生成的bundle的名字
import(/*webpackChunkName:lodash*//* webpackPreload: true */ 'lodash');

• SplitChunksPlugin的配置

• 缓存最佳实践

  
  
  • html 协商缓存
  • css/js等其他静态资源 设置尽可能久的强缓存
  • html 一旦发生变动，因为每次打包生成的文件hash都不同，所以旧的缓存不会影响新的html。
  • css抽离打包
    
    • 通过webpack打包上线，哈希值分为三种，hash、chunkhash、contenthash。chunkhash会分析文件及其依赖，contenthash只取决于当前文件的内容是否更改。所以如果我们对一个.vue文件的脚本做一点修改并使用chunkhash进行打包，那么.vue文件依赖的css文件chunkhash也会改变，但其实我们并没有修改css，完全是可以通过缓存拿到的。所以我们对css进行抽离，使用contenthash进行打包，只要css内容不改动，那么就可以从缓存拿到。

webpack与vite区别（development）

webpack原理图

webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。

vite原理图

而vite是直接启动开发服务器，请求哪个模块再对该模块进行实时编译。

由于现代浏览器本身就支持ESModule，会自动向依赖的Module发出请求。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。

由于vite在启动的时候不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。

在HMR（热更新）方面，当改动了一个模块后，仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。

当需要打包到生产环境时，vite使用传统的rollup（也可以自己手动安装webpack来）进行打包，因此，vite的主要优势在开发阶段。另外，由于vite利用的是ESModule，因此在代码中（除了vite.config.js里面，这里是node的执行环境）不可以使用CommonJS