Question

首先，我想承认这是我第一次深入Webpack，可能会遗漏一些明显的东西。

我正在开发一个node JS脚本，该脚本可以作为一种代理运行，以向目标环境中的HTML5 / JS客户端应用程序提供功能和数据。 API的一部分在运行时（而不是在构建时）在目标环境的node_modules中提供。在我的代码中，我提供了const phoenix = require('@phoenix/apis/dist/index');

运行webpack，一切都捆绑在一起，但是当我尝试运行脚本时，我遇到了：

无效或意外的令牌在Object。@ phoenix / apis / dist / index （/home/path/node_modules/AgendaWeb_0.0.1/main.js:2312:1）

这是有道理的，因为webpack正在将要求转换为：

eval("module.exports = @phoenix/apis/dist/index;\n\n//# sourceURL=webpack:///external_%22@phoenix/apis/dist/index%22?");

@phoenix将不是有效的模块/对象名称。

我基本上需要webpack来仅保留需求（我不知道这在捆绑的上下文中是否还有意义），以便节点实例可以在其运行环境中引入模块。

这是我的webpack配置：

module.exports = {
entry: {
      main: './src/agendaAgent'
  },
  output: {
      path: path.resolve(__dirname, './prod/')
},
externals: /@phoenix/,
target: 'node',
plugins: [
    new CleanWebpackPlugin(),
    new CopyPlugin([{from:'./manifest.json', to:'./'}]),
    new webpack.DefinePlugin({ 'global.GENTLY': false })
    ]
};

我希望有一种方法可以包含一个在运行时引用的外部模块（在node_modules/@phoenix目录中-这是当前的工作方式，位于Webpacked代码之外）

到目前为止，我已经尝试使用外部对象（如上所述），并尝试使用resolve.alias为它提供直接访问库的路径（这不是一个好的解决方案，因为该模块不是开发环境的一部分-我也没有得到这个工作）。我也尝试过使用IgnorePlugin，但是如果我正确理解它，它只会阻止生成匹配的模块。

感谢任何帮助或指导。

Answer 1

经过一段时间的努力后，我偶然发现了答案。不清楚，但是下面的配置更改允许webpack正确捆绑所有内容：

    output: {
          path: path.resolve(__dirname, './prod/'),
          libraryTarget: 'umd'
    }

相关的更改是libraryTarget: 'umd'，它使webpack将您的模块捆绑在commonJS，AMD和Global中。这里的关键点是，webpack并非试图将模块公开为对象的属性。可能还有其他libraryTarget值会导致成功输出，但是暂时这对我有用。

Webpack外部组件和用户范围的软件包

1 个答案: