Question

我具有以下目录结构：

- modules/ |
           |--- a
                |---- p.jsx
                |---- a_directory/not_to_export.jsx
                |-----q.jsx
           |   
           |--- b
                |---- r.jsx
                |-----s.jsx
           |
           |--- c
                |---- t.jsx

一个简单的问题是-如何将每个模块及其路径导出到webpack中以便在webbrowser中使用。

示例：require('a/p.jsx')应该返回对p模块的引用。

更详尽的目标：

每个顶级jsx，都应视为模块，例如：a/p.jsx，a/q.jsx，b/r.jsx，b/s.jsx，c/t.jsx。
实际上应该使用以下路径来引用所有这些模块：在b / r.jsx中，我要访问a/p.jsx。
所有内容都编译为一个jsx，基本上要求语句是同步的。
如果可能的话，缓存版本
要求应该像构建外部一样导出，我应该能够加载一个组件，例如：require("a/p.jsx")可以在构建外部使用，而不仅仅是导出入口点。

这种行为与早午餐产生的行为非常相似，唯一的问题是早午餐不支持条件的require / import语句。

Answer 1

每个顶级jsx，都应视为模块，例如：a/p.jsx，a/q.jsx，b/r.jsx，b/s.jsx，c/t.jsx。



实际上应该使用以下路径来引用所有这些模块，例如：在b/r.jsx中，我要访问a/p.jsx。

要配置wepack如何解析绝对路径，请参见resolve option。您必须将modules文件夹添加到解析器。因此，在您的webpack配置中添加：

module.exports = {
  //...
  resolve: {
    modules: ['node_modules', 'modules']
  }
};

我假定您的modules文件夹与node_modules文件夹处于同一级别。

所有内容都编译为单个jsx，基本上要求语句是同步的。



需要出口。

要构建与节点js一起使用，请使用target选项：

module.exports = {
  target: 'node'
};

Webpack导出所有组件而没有冗余

1 个答案: