[2021-02-03 更新] webpack5新特性详解

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: 开启副作用，就会使没有用到的地方打包进去, 默认true不会打包
    }
    ...
}

// package.json "sideEffects": false,


### 五、持久化缓存提高性能

* 第一次构建是一次全量构建，它会**利用磁盘模块缓存**(以空间换时间)，使得后续的构建从中获利。
* 后续构建具体流程是：**读取磁盘缓存 -> 校验模块 -> 解封模块内容**。

* 第一次打包时间

  ```javascript
  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（准备中...）

jeddygong / frontend-document

[2021-02-03 更新] webpack5新特性详解 #19

webpack5主要新特性介绍

一、资源模块

二、moduleIds & chunkIds 的优化

概念和选项

三、移除Node.js的polyfill

3.1 安装

3.2 使用： src/index.js

3.3 webpack.config.js

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

3.4.1 安装

3.4.2 使用

四、更强大的tree-shaking

六、模块联邦

6.1 什么是模块联邦？

6.2 动机

6.3 Module Federation

七、其它