Webpack 4，如何将一个模块导入另一个既是入口点的模块？答案

【问题标题】：Webpack 4, how to import a module into another module that are both entry points?Webpack 4，如何将一个模块导入另一个既是入口点的模块？
【发布时间】：2019-10-23 16:10:02
【问题描述】：

我是 Webpack 的新手，所以我的术语可能并不完全正确。我要做的是先构建一个自定义 Phaser 模块，然后将其导入另一个入口点，这取决于它。

编辑：我尝试过使用 SplitChunks、动态导入和别名。但无济于事。有没有办法通过插件或方法来实现这一点？

来自 webpack.config.js：

entry: {
       'phaser.min': './phaser-builder.js',
       game: './src/index.js'

   },

   resolve: {
       alias: {
           'eventemitter3': path.resolve(__dirname, './node_modules/eventemitter3')
       },
       modules: [ 'node_modules/phaser/src', 'node_modules' ]
   },

   output: {
       path: path.resolve(__dirname, 'build'),
       filename: '[name].js',
       library: 'Phaser',
       libraryTarget: 'umd',
       sourceMapFilename: '[file].map',
       devtoolModuleFilenameTemplate: 'webpack:///[resource-path]',
       devtoolFallbackModuleFilenameTemplate: 'webpack:///[resource-path]?[hash]',
       umdNamedDefine: true
   },

phaser-builder.js 的内容：

require('polyfills');

var CONST = require('const');
var Extend = require('utils/object/Extend');

var Phaser = {

   ... code ...
};

Phaser = Extend(false, Phaser, CONST);
module.exports = Phaser;
global.Phaser = Phaser;

index.js（第二个入口点）需要从 ./phaser-builder.js（第一个入口点）创建的 phaser.min.js 中的“Phaser”对象，如下所示：

index.js 的内容：

//import 'phaser';  //this works but it's not the custom build from entry point one.
import { Phaser } from '../build/phaser.min';
import { TestScene } from './scenes/TestScene';

const gameConfig = {
  width: 680,
  height: 400,
  scene: TestScene
};

new Phaser.Game(gameConfig);

TestScene.js 的内容： （在 index.js 中导入）

export class TestScene extends Phaser.Scene {
    preload() {
    this.load.image('logo', 'assets/sprites/logo.png');
    }

    create() {
        this.add.text(100, 100, 'Working...', { fill: '#0f0' });
        this.add.image(100, 200, 'logo');
    }
}

如上面 index.js 中所述，如果我只是使用 import 'phaser';（我猜是从 node_modules 中提取的？）一切正常。但这是我不想要的完整的移相器库。我想导入我在入口点一中创建的自定义构建，它存在于 /build/phaser.min.js 中

如果我尝试从 /build/phaser.min.js 导入，我会收到此错误：

"TypeError: Super expression 必须为 null 或函数"

据我了解，这基本上是说 Phaser 对象/模块未定义，因此 TestScene 没有按预期扩展 Phaser.Scene。

【问题讨论】：

我已经在 Phaser 2 (CE) 上尝试过类似的东西，但它在 Gulp 中有效，只需添加最少数量的模块，在这里查看 github.com/nazimboudeffa/phaser-101 我会关注这个线程因为我对使用 Phaser 3 执行此操作的相同方式感兴趣。感谢询问

标签： javascript node.js webpack phaser-framework

【解决方案1】：

使用 webpack，我按照以下方式添加特定的相位器构建，我希望这是您正在寻找的，或者至少可以让您知道我们如何使用 webpack 来做

谢谢。

【讨论】：