写的webpack插件如何适配CommonJs项目和EsModule项目

1、源码用Esmodule

2、使用双模板导出

{
  "name": "my-plugin",
  "main": "./dist/index.cjs",           // CommonJS项目的 入口
  "module": "./dist/index.mjs",         // ESmodule项目的 入口
  "exports": {
    "import": "./dist/index.mjs",       // ESM 
    "require": "./dist/index.cjs",      // CJS
    "default": "./dist/index.cjs"
  },
  "type": "module"                      
} 

main字段是CommonJs项目的入口

module字段是ESmodule项目的入口

ES中的import就会导入exports中的import的入口文件

CommonJs中的require就会导入exports中的require的入口文件

3、选择构建工具并配置就完成了