webpack手摸手学习系列之 webpack5 的认识与变化

ゞ浴缸里的玫瑰 2023-02-14 02:35 25阅读 0赞

#### 一、webpack 5 的介绍及下载 ####

1.  `webpack 5` 通过持久缓存提高构建性能。
2.  `webpack 5` 使用更好的算法和默认值来改善长期缓存。
3.  `webpack 5` 通过更好的树摇和代码生成来改善捆绑包大小。
4.  `webpack 5` 清除处于怪异状态的内部结构，同时在 `v4` 中实现功能而不引入任何重大更改。
5.  `webpack 5` 通过引入重大更改来为将来的功能做准备，以使我们能够尽可能长时间地使用 `v5`。
6.  `webpack 5` 的下载可以通过 `npm i webpack@next webpack-cli -D` 命令进行下载。

#### 二、webpack 5 的变化 ####

1.  **自动删除 Node.js Polyfills**

*  早期，`webpack` 的目标是允许在浏览器中运行大多数 `node.js` 模块，但是模块格局发生了变化，许多模块用途现在主要是为前端目的而编写的。`webpack <= 4` 附带了许多 `node.js` 核心模块的 `polyfill`，一旦模块使用任何核心模块（即 `crypto` 模块），这些模块就会自动应用。
 *  尽管这使使用为 `node.js` 编写的模块变得容易，但它会将这些巨大的 `polyfill` 添加到包中。在许多情况下，这些 `polyfill` 是不必要的。
 *  `webpack 5` 会自动停止填充这些核心模块，并专注于与前端兼容的模块。
 *  迁移，尽可能尝试使用与前端兼容的模块，以及可以为 `node.js` 核心模块手动添加一个 `polyfill` 和错误消息将提示如何实现该目标。

1.  **Chunk 和模块 ID**

*  添加了用于长期缓存的新算法，在生产模式下默认情况下启用这些功能，如下所示：  
    `chunkIds: "deterministic", moduleIds: "deterministic"`

1.  **Chunk ID**

*  你可以不用使用 `import(/* webpackChunkName: "name" */ "module")` 在开发环境来为 `chunk` 命名，生产环境还是有必要的
 *  `webpack` 内部有 `chunk` 命名规则，不再是以 `id(0, 1, 2)` 命名了

1.  **Tree Shaking**

*  `webpack` 现在能够处理对嵌套模块的 `tree shaking`，在生产环境中, `inner` 模块暴露的 `b` 会被删除，代码如下所示：
    
        // inner.js
        export const a = 1;
        export const b = 2;
        
        // module.js
        import * as inner from './inner';
        export {  inner };
        
        // user.js
        import * as module from './module';
        console.log(module.inner.a);
 *  `webpack` 现在能够多个模块之前的关系，当设置了`"sideEffects": false`时，一旦发现`test`方法没有使用，不但删除`test`，还会删除`"./something"`，代码如下所示：
    
        import {  something } from './something';
        
        function usingSomething() { 
          return something;
        }
        
        export function test() { 
          return usingSomething();
        }
 *  `webpack` 现在能处理对 `Commonjs` 的 `tree shaking`

1.  **Output**

*  `webpack 4` 默认只能输出 `ES5` 代码
 *  `webpack 5` 开始新增一个属性 `output.ecmaVersion`, 可以生成 `ES5` 和 `ES6 / ES2015` 代码，比如 `output.ecmaVersion: 2015`

1.  **SplitChunk**

*  `webpack4`，代码如下所示：
    
        minSize: 30000;
 *  `webpack5`，代码如下所示：
    
        minSize: { 
          javascript: 30000,
          style: 50000,
        }

1.  **Caching**

*  缓存将存储到 `node_modules/.cache/webpack`，代码如下所示：
    
        // 配置缓存
        cache: { 
          // 磁盘存储
          type: "filesystem",
          buildDependencies: { 
            // 当配置修改时，缓存失效
            config: [__filename]
          }
        }

1.  **监视输出文件**

*  之前 `webpack` 总是在第一次构建时输出全部文件，但是监视重新构建时会只更新修改的文件
 *  此次更新在第一次构建时会找到输出文件看是否有变化，从而决定要不要输出全部文件

1.  **默认值**

*  `entry: "./src/index.js`
 *  `output.path: path.resolve(__dirname, "dist")`
 *  `output.filename: "[name].js"`

1.  **更多内容**，可以看 `https://github.com/webpack/changelog-v5`