Webpack 5 正式发布, 有哪些新特性

Webpack 5 是目前最新版本的 Webpack，在 2020 年 10 月 10 日正式发布。相对于 Webpack 4，Webpack 5 带来了许多重要改进，并增加了一些新特性。

下面是 Webpack 5 的一些新特性：

1. 更快的构建速度

Webpack 5 明显提高了构建速度，在代码的编译和 Bundle 的生成等方面都有所改进。这得益于 Webpack 5 对缓存和 Tree Shaking 等优化的优化。

2. 新模块热替换（HMR）算法

Webpack 5 带来了基于 ESM 的新的 HMR 算法，相对于之前的 HMR 性能更好，而且支持更多类型的模块，包括 CSS、图片等。

演示：我们可以通过一个简单的示例来演示 Webpack 5 新 HMR 算法的实现。

// index.js
import './style.css'

const app = document.getElementById('app')
app.innerHTML = `
  <h1>Hello World!</h1>
  <p>I'm webpack 5!</p>
`

if (module.hot) {
  module.hot.accept('./style.css', () => {
    const newStyles = require('./style.css')
    newStyles.use()
  })
}

这是一个简单的示例，其中使用了一个 CSS 文件，它会在 HMR 时被更新。如果你的页面打开后，修改 style.css 文件，Webpack 将自动进行 HMR 并更新页面。

3. 更好的 Tree Shaking

Webpack 5 进一步优化了 Tree Shaking（摇树优化），可以更好地扫描依赖包并去除未使用的代码。相比于之前的版本，Webpack 5 可以更准确地摇树，并生成更小的 Bundle。

演示：下面是一个使用了 ES6 模块语法，使用 lodash 的代码示例。

// index.js
import { map } from 'lodash'

const arr = [1, 2, 3]
const result = map(arr, (x) => x * 2)
console.log(result)

这段代码使用了 lodash 的 map 函数，Webpack 5 可以将它正确地摇树，只打包所需的部分代码，减小了打包文件的体积。

4. 支持全局变量

Webpack 5 允许您将一些模块绑定到全局变量上，这使您可以轻松地在应用程序代码中使用全局变量，而无需 import 它们。这在与一些老旧的库集成时会很有用。

演示：这是一个简单的示例，在配置中使用全局变量。

// webpack.config.js
module.exports = {
  // ...
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery'
    })
  ]
}

在这个配置项中，我们将 $ 绑定到全局的 jQuery 上，那么在应用程序代码中就可以直接使用 $，而不需要 import/require jQuery。

以上就是 Webpack 5 的一些新功能特性。使用这些新特性，你可以更方便地构建高质量的应用程序，提高开发效率并减少打包后的文件大小。