Webpack - 如何在另一个 javascript 文件中要求一个条目包

Question

我有 2 个入口点：一个用于主应用程序，一个用于应用程序的旧部分。

legacy.js 正在按照我的意愿进行捆绑，如下所示：

module.exports = {
    entry: {
        app: ['file1', 'file2'],
        legacy: ['legacyfile1', 'legacyfile2'],
    },
    devtool: 'source-map',
    context: path.resolve(__dirname, 'src'),
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/',
        filename: 'js/[name].js'
    },
    plugins: [
    new HtmlWebpackPlugin({
        filename: 'index.html',
        template: 'index.html',
        chunks: ['app'] // Only include app bundle - Legacy will be required in the legacy javascript file.js at runtime.
    }),
}

这会生成两个包，只有 app.js 包被注入到 index.html 中。

然后在 legacy.js 中，我想在文件顶部要求 legacy 包，像这样（都不起作用，Webpack 找不到模块）：

require('./dist/js/legacy.js');
require('./js/legacy.js');
require('dist/js/legacy.js');
require('/js/legacy.js');

Webpack 如何在运行时要求将 Webpack 捆绑文件放入 javascript 文件中？

感谢那些抽出时间考虑这个问题的人！

Answer 1

Webpack 将每个入口点捆绑到一个不导出任何内容的普通脚本文件中。所以你不能require或import它。

一种解决方案（通过全局范围共享代码除外）是找到两个捆绑包的通用可共享代码，并将其提取到单独的模块中，以便您可以从任一代码库中导入它。