webpack - 用于支持多个导入文件夹路径的入口点的 Webpack 5 配置

Question

我有一个“核心”项目，其中包含许多其他项目共享的模块（和其他文件）。我有一个文件夹结构，如：

• 源代码
  • 文件夹1
    • 模块1.js
    • 模块2.js
    • nonmoduleusedbymodule1.js
  • 文件夹2
    • 文件夹3
      • 模块3.js
      • 模块4.js
  • 文件夹4
    • 样式.css
• webpack.config.js

package.json 设置为发布到@example/core，在我依赖它的项目中，我的目标是能够做到：

import { item } from '@example/core/folder1/module1';
import Item2 from '@example/core/folder2/folder3/module3';

在上面的例子中，“nonmoduleusedbymodule1.js”不应该是一个入口点。

我在网上的代码片段中看到了上述导入模式，但我不确定如何定义 webpack.config.js 以支持此类入口点以及它如何保留文件夹路径。我注意到在“ol”（OpenLayers）包中，它的 tsconfig.json 将所有构建文件夹放入 src 旁边的根项目目录中，而不是 dist 文件夹。这看起来很脆弱，但它可以工作，因为你可以这样做import TileLayer from 'ol/layer/Tile';我应该以某种方式使用 webpack 遵循这个约定，还是有更好的方法将所有内容放在 dist 文件夹中，而不需要 dist 明确地在导入路径中？

阅读文档后，我目前的想法是：

module.exports = {
    entry: {
        module1: { import: './src/folder1/module1.js', filename: 'folder1/[name].js' },
        module2: { import: './src/folder1/module2.js', filename: 'folder1/[name].js' },
        module3: { import: './src/folder2/folder3/module3.js', filename: 'folder2/folder3/[name].js' },
        module4: { import: './src/folder2/folder3/module4.js', filename: 'folder2/folder3/[name].js' }
    },
    output: {
        path: path.resolve(__dirname, 'dist') // This puts everything in dist
    },
    plugins: [
        new CopyPlugin({
            patterns: [
                { from: 'src/folder4/style.css', to: 'folder4' }
            ],
        })
    ],
    // ...
};

因此，对于我导出的 50 个模块，我会为每个模块定义导入条目和带有路径的文件名。有点冗长，但易于管理。

这并不能解决 dist 导致的问题，因为我的导入看起来像import { item } from '@example/core/dist/folder1/module1';What's the convention for this？它只是删除dist并在src旁边构建文件夹吗？（我宁愿不在我所有依赖于该项目的项目中创建别名）。这似乎行得通。是否有 Webpack 5 库的示例以及处理上述场景的推荐方法？

（还有一个问题。我应该为此使用 webpack 库功能吗？我想不通。就像我应该创建模块 mjs 文件，然后我的其他项目将导入？）。

标签： webpack