webpack 的plugin简单实现 customize-cra

我是用的是 npx create-react-app my-app创建的项目
个人不推荐通过 npm run eject拉取webpack配置

1 下载 customize-cra 和 react-app-rewired

cnpm install customize-cra react-app-rewired --dev

2 更改 package.json 中的 scripts 配置

将原本以下四行做替换"scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test","eject": "react-app-rewired eject"},

3.在根目录添加config-overrides.js 文件

主要在该文件配置webpack

4.新增一个plugin

/plugin/testPlugin.js
/** @Author: muge* @Date: 2022-05-18 21:54:03* @LastEditors: * @LastEditTime: 2022-05-18 23:48:42*/
class testPlugin {constructor(options) {this.options = options;console.log("插件被使用了");console.log(options);}apply(compiler) {const { text } = this.options;// compiler.hooks.done，生命周期：在 compilation 完成时执行compiler.hooks.done.tap("最后输出", () => {console.log(`${text}`);});}
}
module.exports = testPlugin;

5.在config-overrides引入插件

/** @Author: muge* @Date: 2022-05-18 22:01:38* @LastEditors: Please set LastEditors* @LastEditTime: 2022-05-18 23:48:36*/
const { override, addWebpackPlugin } = require("customize-cra");
const testPlugin = require("./plugin/testPlugin");
module.exports = override(addWebpackPlugin(new testPlugin({text: "myPlugin",}))
);

有很多的钩子函数推荐上官网去看 https://webpack.docschina.org/api/compiler-hooks/#hooks

webpack 的plugin简单实现 customize-cra相关推荐

webpack入门之简单例子跑起来
webpack入门之简单例子跑起来 webpack介绍 Webpack是当下最热门的前端资源模块化管理和打包工具,它可以将很多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源,还可以将按需加载 ...
IntellJ IDEA 基础之一些常用插件plugin 简单整理 (辅助提高编写代码效率)
IntellJ IDEA 基础之一些常用插件plugin 简单整理 (辅助提高编写代码效率) 目录 IntellJ IDEA 基础之一些常用插件plugin 简单整理 (辅助提高编写代码效率) 一 ...
[转] webpack之plugin内部运行机制
简介 webpack作为当前最为流行的模块打包工具,几乎所有的主流前端开发框架(React.Vue等)都会将其作为默认的模块加载和打包工具.通过简单的配置项,使用各种相关的loader和plugin, ...
Webpack 插件开发如此简单！
本文使用的Webpack-Quickly-Starter快速搭建 Webpack4 本地学习环境. 建议多阅读 Webpack 文档<Writing a Plugin>章节,学习开发简单插 ...
webpack系列-plugin
plugin简介 plugin的本质是一个类,类里面有一个apply方法,apply的参数为compiler,在其上面会有一些hooks,不同的hooks对应不同的tapable实例. 同步和异步的生 ...
webpack gulp grunt 简单介绍
本文主要是讲下webpack的相关知识点,理论比较多,因为webpack的功能非常强大,说到的也基本都是经常用到的. 这三个工具都属于前端自动化的工具,都是第三方的,并且国内很多大型团队也都有自己成熟 ...
Maven自定义打包插件Assembly Plugin简单使用
使用Assembly Plugin实现自定义打包 1.修改pom.xml  <build><pl ...
Webpack之plugin
什么是plugin? plugin是插件的意思,通常用于对现有的架构进行扩展.webpack中的插件,就是对webpack现有功能的各种扩展,比如打包优化,文件压缩等等. loader和plugin的 ...
前端学习（2154）：webpack横幅plugin的使用
初探webpack之编写plugin
初探webpack之编写plugin webpack通过plugin机制让其使用更加灵活,以适应各种应用场景,当然也大大增加了webpack的复杂性,在webpack运行的生命周期中会广播出许多事件, ...

webpack 的plugin简单实现 customize-cra

1 下载 customize-cra 和 react-app-rewired

2 更改 package.json 中的 scripts 配置

3.在根目录添加config-overrides.js 文件

4.新增一个plugin

5.在config-overrides引入插件

webpack 的plugin简单实现 customize-cra相关推荐

最新文章

热门文章