编写 webpack 插件

/*_ 推荐文章 _/ https://segmentfault.com/a/1190000022056204#item-1

步骤

源码相关

• npm init --yes 初始化一个 package.json 文件，用来管理 npm 的所有依赖
• npm install webpack webpack-cli --save 【 webpack 是 webpack 的核心模块 webpack-cli 是 Webpack 的 CLI 程序，用来在命令行中调用 webpack】
• npx webpack --version
• npx webpack 进行打包构建 打包之后的文件在 dist 文件夹下

配置相关

在 webpack.config.js 中进行相关的配置

webpack 相关概念

• mode : 选择打包的环境
• entry:入口
• output:出口
• loader: 用于对模块的源代码进行转换
• plugin: 用于解决 loader 无法解决的事情 -- webpack 插件是一个具有 apply 方法的 JavaScript 对象。apply 方法会被 webpack compiler 调用，并且在 整个 编译生命周期都可以访问 compiler 对象。

说明

是一个自定义的 webpack 插件，主要作用是检查 webpack 构建输出的最终 bundle 文件的大小，并与设定的大小限制进行比较，然后根据比较结果输出相应的信息

• 如果文件大小小于 sizeLimit，则输出安全信息。
• 如果文件大小等于 sizeLimit，则输出警告信息。
• 如果文件大小超过 sizeLimit，则输出错误信息。 -- 这个插件可以用于确保生成的 bundle 文件不会过大，从而影响网页加载性能。通过在构建过程中集成这种检查，开发者可以及时发现并优化打包后的资源文件，保持应用的轻量化和高性能。

包的使用

安装

npm install bundlesize-webpack-plugin

导入

const bundlesizeWebpackPlugin = require('bundlesize-webpack-plugin')

输出

Safe:Bundle-Size 1.28 KB
SIZE LIMIT: 3
asset build.js 1.28 KiB [emitted] (name: main)
./src/index.js 27 bytes [built] [code generated]
webpack 5.92.1 compiled successfully in 889 ms