基于Webpack构建ES6类库：寻求替代html-webpack-plugin的JS工具

有两种可行的方案能满足你的需求，既保留Webpack代码分块的缓存优势，又生成固定名称的MyAPI.js作为对外入口：

方案一：自定义Webpack插件 #

直接编写极简插件，在编译阶段自动生成目标入口文件，无需额外脚本。

1. 编写自定义插件 #

创建FixedEntryPlugin.js文件：

class FixedEntryPlugin {
  apply(compiler) {
    // 在资源即将输出到磁盘时触发
    compiler.hooks.emit.tapAsync('FixedEntryPlugin', (compilation, callback) => {
      // 筛选出所有业务JS chunk（排除runtime等辅助chunk）
      const targetChunks = Array.from(compilation.chunks).filter(chunk => {
        return chunk.files.some(file => file.endsWith('.js')) && !chunk.name?.startsWith('runtime');
      });

      // 生成import语句（根据你的chunk导出规则调整变量名）
      const importLines = targetChunks.map((chunk, idx) => {
        const jsFile = chunk.files.find(f => f.endsWith('.js'));
        // 假设每个chunk导出对应功能模块，这里用a/b/c作为变量名示例
        const varName = String.fromCharCode(97 + idx);
        return `import { ${varName} } from './${jsFile}';`;
      }).join('\n');

      // 生成API导出代码（匹配你的业务逻辑）
      const exportCode = `
export const MyAPI = {
  function1: a.doSomething,
  function2: d.doSomething
};
`;

      // 将生成的内容写入MyAPI.js
      compilation.assets['MyAPI.js'] = {
        source: () => `${importLines}\n${exportCode}`,
        size: () => `${importLines}\n${exportCode}`.length
      };

      callback();
    });
  }
}

module.exports = FixedEntryPlugin;

2. 在Webpack配置中引入插件 #

修改webpack.config.js：

const FixedEntryPlugin = require('./FixedEntryPlugin');

module.exports = {
  // 你的原有配置...
  plugins: [
    // 其他插件...
    new FixedEntryPlugin()
  ]
};

方案二：webpack-manifest-plugin + 自定义脚本 #

通过生成chunk映射文件，再用Node脚本生成目标入口，逻辑更直观易调整。

1. 安装依赖 #

npm install webpack-manifest-plugin --save-dev

2. 配置Webpack生成manifest #

修改webpack.config.js：

const { WebpackManifestPlugin } = require('webpack-manifest-plugin');

module.exports = {
  // 你的原有配置...
  plugins: [
    new WebpackManifestPlugin({
      fileName: 'manifest.json',
      publicPath: '', // 生成相对路径，适配入口文件位置
      generate: (seed, files) => {
        // 只保留JS文件的映射关系
        return files.reduce((manifest, file) => {
          if (file.path.endsWith('.js')) {
            manifest[file.name] = file.path;
          }
          return manifest;
        }, seed);
      }
    })
  ]
};

3. 编写生成入口的脚本 #

创建generate-entry.js：

const fs = require('fs');
const path = require('path');

// 读取Webpack生成的chunk映射
const manifest = JSON.parse(fs.readFileSync(path.resolve(__dirname, 'build/manifest.json'), 'utf8'));
const jsChunks = Object.values(manifest).filter(file => file.endsWith('.js'));

// 生成import语句
const importLines = jsChunks.map((file, idx) => {
  const varName = String.fromCharCode(97 + idx);
  return `import { ${varName} } from './${file}';`;
}).join('\n');

// 生成API导出代码
const exportCode = `
export const MyAPI = {
  function1: a.doSomething,
  function2: d.doSomething
};
`;

// 写入MyAPI.js
fs.writeFileSync(path.resolve(__dirname, 'build/MyAPI.js'), `${importLines}\n${exportCode}`);

4. 修改编译脚本 #

在package.json中更新build命令：

{
  "scripts": {
    "build": "webpack && node generate-entry.js"
  }
}

关键注意事项 #

• 调整publicPath确保生成的import路径能正确指向chunk文件（比如chunk在static/js/下时，路径要写成./static/js/xxx.js）
• 若项目包含runtime chunk，需在筛选逻辑中排除，避免无效引用
• 两种方案中，import和export的变量名需与你的实际代码导出规则匹配，可根据chunk名称或导出内容动态调整

内容的提问来源于stack exchange，提问作者BJC