webpack5主要新特性介绍

• 资源模块；
• moduleIds & chunkIds 的优化；
• 移除Node.js的polyfill；
• 更强大的tree-shaking；
• 持久化缓存提高性能；
• Module Federation 模块联邦；

一、资源模块

• 资源模块是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外的loader
• raw-loader => asset/source 导出资源的源代码；
• file-loader => asset/resource 发送一个单独的文件并导出URL；
• url-loader => asset/inline 导出一个资源的data URL；
• asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现。
• 具体代码实现：

module.exports = {
    
	...
	module:{
    
        rules:[
            {
    
                test:/\.js$/,
                exclude:/node_modules/,//不打包 不编译node_modules下面的文件
                use:[
                    {
    
                        loader:'babel-loader',
                        options:{
    
                            presets:[
                                '@babel/preset-env',
                                '@babel/preset-react'
                            ]
                        }  
                    }
                ]
            },
            {
    
                test:/\.png$/,
                type:'asset/resource'//对标file-loader
            },
            {
    
                test:/\.ico$/,
                type:'asset/inline'//对标url-loader 模块的大小<limit base64字符串
            },
            {
    
                test:/\.txt$/,
                type:'asset/source'//对标raw-loader
            },
            {
    
                test:/\.jpg$/,
                type:'asset',//对标raw-loader
                parser:{
    
                    dataUrlCondition:{
    
                        maxSize:4*1024
                    }
                }
            },
            {
    
                test:/\.css$/,
                 use:['style-loader','css-loader']
            },
        ]
    }
}

二、moduleIds & chunkIds 的优化

概念和选项

• module: 每一个文件其实都可以看成一个module；
• chunk: webpack打包最终生成的代码块，代码块会生成文件，一个文件对应一个chunk
• 在webpack5之前，没有从entry打包的chunk文件，都会以1、2、3…的文件命名方式输出、删除某些文件，从而可能导致缓存失效
• 再生产模式下，默认启用这些功能chunkIds: "deterministic", moduleIds: "deterministic", 此算法采用 稳定性 的方式将短数字ID（3或4个字符）的hash值分配给modules 和 chunks；
• chunkId设置为deterministic，则output中的chunkFilename里的[name]会被替换成确定性短数字ID；
• 虽然chunkId不变（不管值是 deterministic | natural | names），但更改chunk内容，chunkhash还是会改变的。

可选值	含义	示例
natural	按使用顺序的数字ID	1
named	方便调式的高可读性id	src_page_home.js
deterministic	根据模块名称生成剪短的hash值	915（注意最高只能生成999个序列，所以建议文件不要超过999个）
size	根据模块大小生成的数字id	1024

三、移除Node.js的polyfill

• Webpack4 带来了许多Node.js核心模块 polyfill, 一旦模块中使用了任何核心模块（如crypto），这些模块就会被自动启用
• Webpack5 不在自动引入这些polyfill

3.1 安装

npm i crypto-js crypto-browserify stream-browserify buffer -D

3.2 使用： src/index.js

import CryptoJS from 'crypto-js';
console.log(CryptoJS.MD5('gongjin').toString());	

3.3 webpack.config.js

module.exports = {
    
    ...
    resolve:{
    
        /* fallback:{
            'crypto':require.resolve('crypto-browserify'),
            'stream':require.resolve('stream-browserify'),
            'buffer':require.resolve('buffer')
        }, */
        fallback:{
    
            'crypto':false,
            'stream':false,
            'buffer':false
        }
    }
}

3.4 在webpack5中还是要使用polyfill（例如：crypto）该怎么使用呢？

3.4.1 安装

npm i crypto-js crypto-browserify -D

3.4.2 使用

// index.js 使用文件中
import CryptoJS from 'crypto';

console.log(CryptoJS);	
console.log(CryptoJS.MD5('gongjin').toString());

// pachage.json 文件中添加
"browser": {
    
  "crypto": "crypto-js" // crypto-js为前端使用的crypto插件，需要npm i crypto-js
},

// webpack.config.js  文件中添加配置
module.exports = {
    
    ...
    resolve:{
    
        fallback:{
    
            'crypto':require.resolve('crypto-browserify'), // 需要使用crypto就加上这个
            'stream':require.resolve('stream-browserify'), // 需要使用stream就加上这个
            'buffer':require.resolve('buffer') // 需要使用buffer就加上这个
        }
    }
  ...
}

四、更强大的tree-shaking

• tree-shaking就在打包的时候剔除没有用到的代码

• Webpack4 本身的tree shaking比较简单，主要是找一个 import 进来的变量是否在这个模块内出现过；

• webpack5可以进行根据作用域之间的关系来进行优化；

• webpack-deep-scope-plugin

• 代码实现：

  // inner.js
  import {
         test1 } from './module1.js';
  test1();
  
  // module1.js
  import {
         test3 } from './module2';
  export function test1(){
        
      console.log('test1');
  }
  export function test2(){
        
      console.log('test2' + test3);
  }
  
  //  module2.js
  export function test3(){
        
      console.log('test3');
  }
  export function test4(){
        
      console.log('test4');
  }
  
  // webpack.config.js  文件中添加配置
  module.exports = {
        
      ...
  	  mode: 'production',
      optimization:{
        
          usedExports: true, // 标记出未被导出的变量, 使用到的文件才导出
      }
    	...
  }
  
  

• sideEffects（了解即可）

  • 函数副作用只当调用函数时，除了返回函数值之外，还产生了附加的影响，例如修改全局变量；

  • 严格的函数式语言要求函数必须无副作用；

    // webpack.config.js  文件中添加配置
    module.exports = {
            
        ...
    	  mode: 'production',
        optimization:{
            
            sideEffects: true, // true: 开启副作用，就会使没有用到的地方打包进去, 默认false不会打包
        }
      	...
    }
    
    // package.json
    "sideEffects": false, // 此处的false会覆盖optimization.sideEffects中的true
    

五、持久化缓存提高性能

• 第一次构建是一次全量构建，它会利用磁盘模块缓存(以空间换时间)，使得后续的构建从中获利。

• 后续构建具体流程是：读取磁盘缓存 -> 校验模块 -> 解封模块内容。

• 第一次打包时间

  webpack 5.11.0 compiled successfully in 4657 ms
  

• 第二次打包时间

  webpack 5.11.0 compiled successfully in 364 ms
  

• 总结：

  • 对比webpack4.x打包速度上提升了许多；

• 配置：

  // webpack.config.js
  module.exports = {
         
    cache: {
        
      // 将缓存类型设置为文件系统
      type: 'filesystem', // 默认是memory
      // 默认路径是 node_modules/.cache/webpack
      // 可以自定义文件目录：.cache_webpack5
      cacheDirectory: path.resolve(__dirname, '.cache_webpack5')
    }
  
  

六、模块联邦

6.1 什么是模块联邦？

• Module Federation是为了解决独立应用之间代码共享问题。可以在项目内动态加载其他项目的代码，同步可以共享依赖。
• 通过细化功能模块、组件复用、共享第三方库、runtime dependencies线上加载npm包等，可以更好的服务于多页应用、微前端等开发模式。

以前我们常用的npm包来进行一个公共组件的引用（即UMD）

6.2 动机

• Module Federation的动机是为了不同开发小组间共同开发一个或者多个引用；
• 应用将被划分为更小的应用块，一个应用块，可以是比如头部导航或者侧边栏的前端组件，也可以是数据获取逻辑的逻辑组件
• 每个应用块由不同的小组开发；
• 应用或者应用块共享；

6.3 Module Federation

• 使用Module Federation时，每个应用块都是一个独立的构建，这些构建都将编译为容器；

• 容器可以被其他应用或者其他容器应用；

• 一个被引用的容器被称为 Application A / Application B ，引用者被称为 Application B / Application A， Application A / Application B 暴露模块给 Application B / Application A， Application A / Application B则可以使用这些暴露的模块，这些模块也可以被称为 remote 模块；

  • 

• 从而实现微前端的效果；

  • 微前端也是一种模块共享的方式，主要解决多项目并存问题，多项目并存的最大问题就是模块共享，不能有冲突。

• 具体代码实现：

  // Application A 亦可以叫远程模块
  
  // webpack.config.js
  module.exports = {
        
    ...
    plugins: [
          ...
          new ModuleFederationPlugin({
        
              name:'remoteVar',// remote向外暴露的全局变量名, 唯一
              filename:'remoteEntry.js',//构建出来的文件名
            	// 表示导出的模块，只有在此申明的模块才可以作为远程依赖被使用
              exposes:{
        
                  './NewsList':'./src/NewsList'
              },
              remotes:{
        
                  host:'hostVar@http://localhost:8081/remoteEntry.js'
              },
            	// 可以让远程加载的模块对应依赖改为使用本地项目的 React 或 ReactDOM 版本，从而统一版本；
              shared:['react','react-dom']    
          })
      ]
  };
  
  // Application B 亦可以叫本地模块
  
  // webpack.config.js
  module.exports = {
        
    ...
    plugins: [
          ...
          new ModuleFederationPlugin({
        
              name:'hostVar', // remote向外暴露的全局变量名, 唯一
              filename:'remoteEntry.js',
              remotes:{
        
                  remote:'remoteVar@http://localhost:8080/remoteEntry.js'
              },
              exposes:{
        
                  './Slides':'./src/Slides'
              },
              shared:['react','react-dom']    
          })
      ]
  };
  

七、其它

• 支持崭新的web平台功能

• 支持通过import.meta访问当前文件路径

  new URL("./image.png", import.meta.url)
  

webpack4.x upgrade webpack5.0（准备中…）