npm 包 esbuild-webpack-plugin 使用教程

什么是 esbuild-webpack-plugin

esbuild-webpack-plugin 是一个能够使用 esbuild 预处理你的 JavaScript 代码，并将其作为 webpack 插件进行打包的 npm 包。使用 esbuild 可以得到更快的构建速度和更小的构建文件。

安装

npm install esbuild-webpack-plugin

使用方法

配置文件

将 esbuild-webpack-plugin 加入到 webpack 的配置文件中，并将它放在其他插件的前面。

const EsbuildPlugin = require('esbuild-webpack-plugin').default;

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

配置选项

esbuild-webpack-plugin 提供了一些配置选项：

entryNames

• Type: (chunkInfo: import('webpack').ChunkInfo) => string

• Description: 对于每个入口，esbuild-webpack-plugin 的输出都将命名为返回值。

• Default: (chunkInfo) => chunkInfo.name ? '[name].js' : 'index.js'

minify

• Type: boolean 或者 object

• Description: 压缩输出的代码。当它是一个纯对象时，它将被传递给 esbuild 的 minify 选项。

• Default: false

target

• Type: string

• Description: 构建目标平台，例如："es2015"、"esnext"、"chrome58"、"firefox57"、"safari11"、"edge16"、"node10.4"。

• Default: "es2015"

loader

• Type: string

• Description: 这是默认情况下用于打包 ASM.js 模块的 loader，如果不支持的话，可以在此处指定为另一个 loader。

• Default: `"binaryen"````````````

jsx

• Type: string 或者 object

• Description: 当构建 JSX 语法时，此选项用于选择 React 装配函数。支持：* "react" (default)，* "preact"，* "vue"，* "htm"，* "dom-bindings"，* "hyperapp"，* "surplus"。

• Default: "react"

示例代码

-- -------------------- ---- -------
----- ------------- - ------------------------------------------

-------------- - -
  ----- -------------
  ------ -
    ---- ----------------
  --
  ------- -
    --------- ------------
    ----- --------- - -------
  --
  -------- -
    --- ---------------
  -
--

注意事项

esbuild-webpack-plugin 只适用于 webpack 5 及以上版本。在使用之前确保已经升级到 webpack 5。

总结

esbuild-webpack-plugin 是一个非常有用的工具，可以大大提高前端开发的效率和构建文件的性能。通过它的配置选项，我们可以更加灵活地控制它的行为。在实际开发时，推荐使用该插件来优化你的项目。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedd5f1bb4e78292a6fb848