持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

现在前端架构最重要的点就在于前端工程化，任何项目都需要工程化。

但是现在在工作中，更习惯了开箱即用的脚手架来进行配置，Vue的脚手架 vue-cli，React的脚手架 create-react-app，这样确实方便很多。也大多数新项目都是以前项目的迭代，直接使用。

Webpack是搭建前端工程化环境的一个重要技术选型，github上Webpack的repositories的数量是157k，Webpack5是Webpack的最新版本，企业中和开源项目汇总其实还是使用了Webpack4来进行构建，全新版本的Webpack5，比以往版本更强大的功能，这章来学习一下Webpack5的强大

主要改变

通过持久缓存提高构建性能.

使用更好的算法和默认值来改善长期缓存.

通过更好的树摇和代码生成来改善捆绑包大小.

清除处于怪异状态的内部结构，同时在 v4 中实现功能而不引入任何重大更改.

通过引入重大更改来为将来的功能做准备，以使我们能够尽可能长时间地使用 v5.

安装最新版本 npm i webpack@next webpack-cli -D

1. Chunk 和模块 ID

添加了用于长期缓存的新算法。在生产模式下默认情况下启用这些功能

webpack.config.js

{
    chunkIds: "deterministic",
    moduleIds: "deterministic"
}

2. Polyfills

webpack 的目标是允许在浏览器中运行大多数 node.js 模块，但是模块格局发生了变化，许多模块用途现在主要是为前端目的而编写的。webpack <= 4 附带了许多 node.js 核心模块的 polyfill，一旦模块使用任何核心模块（即 crypto 模块），这些模块就会自动应用。

尽管这使使用为 node.js 编写的模块变得容易，但它会将这些巨大的 polyfill 添加到包中。在许多情况下，这些 polyfill 是不必要的。

webpack 5 会自动停止填充这些核心模块，并专注于与前端兼容的模块。迁移：

尽可能尝试使用与前端兼容的模块。
可以为 node.js 核心模块手动添加一个 polyfill。错误消息将提示如何实现该目标。

3. Chunk ID

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

4. Tree Shaking

webpack 现在能够处理对嵌套模块的 tree shaking

 // 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);

在生产环境中, inner 模块暴露的 b 会被删除

webpack 现在能够多个模块之前的关系

 import { something } from './something';
 
 function usingSomething() {
   return something;
 }
 
 export function test() {
   return usingSomething();
 }

当设置了"sideEffects": false时，一旦发现test方法没有使用，不但删除test，还会删除"./something"

webpack 现在能处理对 Commonjs 的 tree shaking

5. Output

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

webpack.config.js

{
    output.ecmaVersion: 2015
}

6. SplitChunk

webpack.config.js

{
    // webpack4
    minSize: 30000;
}

{
    minSize: {
      javascript: 30000,
      style: 50000,
    }
}

7. Change

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

压缩代码

webpack4 上需要下载安装 terser-webpack-plugin 插件

const TerserPlugin = require('terser-webpack-plugin')

module.exports = { 
optimization: {
  minimize: !isDev,
  minimizer: [
    new TerserPlugin({
      extractComments: false, 
      terserOptions: { 
        compress: { 
          pure_funcs: ['console.log'] 
        }
      }
    }) ]
 }

webpack5本身就自带 js 压缩功能，他内置了 terser-webpack-plugin 插件，我们不用再下载安装。而且在 mode=“production” 的时候会自动开启 js 压缩功能
```
 module.exports = {
    optimization: {
      usedExports: true, //只导出被使用的模块
      minimize : true // 启动压缩
    }
 }
```

cache

webpack4 缓存配置 npm install hard-source-webpack-plugin -D

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin') 

module.exports = { 
plugins: [
  new HardSourceWebpackPlugin(), 
] }

webpack5 内部内置了 cache 缓存机制。cache 会在开发模式下被设置成 type： memory 而且会在生产模式把cache 给禁用掉

module.exports= {
  cache: {
    type: 'filesystem'，
    cacheDirectory: path.join(__dirname, 'node_modules/.cac/webpack')
  }
}

升级 Webpack5

1. Chunk 和模块 ID

2. Polyfills

3. Chunk ID

4. Tree Shaking

5. Output

6. SplitChunk

7. Change