Webpack

Question

我有一个带有多个入口点的 webpack 配置，大致如下所示：

const config = {
    entry: {
        'components/index': './src/components',
        'helpers/index': './src/helpers',
    },
}

module.exports = config;

这会生成两个捆绑文件：components/index.js 和 helpers/index.js。很好，但问题是 components/index.js 包含 helpers 的全部代码...这是因为组件正在导入辅助函数。

示例：

src/helpers 导出名为 foo 的函数。
src/components 从助手中导入 foo 函数。

现在，在 components/index.js 包中，我看到声明了 foo 函数。有没有办法告诉 webpack 它应该使用 require() 函数来代替并导入这个 foo 函数？

所以 component/index.js 的输出看起来像这样：

var foo = require('../helpers/index.js')
/* rest of the code */

Answer 1

我切换到 rollup.js，默认情况下它似乎是这样工作的，没有任何额外的配置：

// rollup.config.js

export default {
    input: {
        'components/index': './src/components',
        'helpers/index': './src/helpers',
    },
    output: {
        dir: 'dist',
        format: 'esm',
    },
};

Webpack - 多个入口点，它们之间需要捆绑

Webpack - multiple entrypoints, require bundles between them

javascript

rollup

bundler