时间戳

首页 > 解决方案 > Webpack：如何使用魔术注释将文件导入将作为库发布然后导入不同应用程序的文件

javascript - Webpack：如何使用魔术注释将文件导入将作为库发布然后导入不同应用程序的文件

问题描述

我有一个作为 umd 库发布的文件，其中包含一个动态导入，它根据配置选项构建一个选择的小部件列表。这一切都很好，因为当我直接运行库时，主 js 和小部件 js 文件正在发布。当我将库导入另一个项目时。它尝试基于项目 url 的根目录而不是基于 umd 的 url 来导入小部件的路径。有没有一种方法可以强制动态导入以库的绝对路径为基础？我在魔术评论中找不到任何有用的东西。

我的次要选择是将每个小部件发布为它们自己不同的库，然后 webpackIgnore 我认为应该工作的导入

webpack 配置输出：

output: {
      publicPath: "",
      path: require("path").resolve("publish/__dist"),
      filename: "[name].js",
      library: {
        name: "widget-container",
        type: "umd",
        umdNamedDefine: true,
      },
    },

在库中导入：

import(/* webpackChunkName: "widgets/widget" */ `../widgets/${b.slug}/js/widget.js`)

标签： javascriptwebpackwebpack-5

解决方案

推荐阅读