javascript - Webpack:除 index.js 以外的默认文件

Question

在当前的 webpack 项目中，我的代码被划分为模块，每个模块都有一个以 .module.js 结尾的主入口点。例如。对于模块 Util，入口点是 util.module.js，我通过编写 import util from 'modules/util/util.模块.js'

但是，由于所有模块的入口点语法相同，我宁愿避免指定入口的完整文件名。例如，如果我可以编写 import util from 'modules/util' 就好了。

我知道如果 util.module.js 是名称 index.js，这会起作用，但我如何告诉 Webpack 以相同的方式获取我当前的模块条目？

Answer 1

我将尝试概述一些现成的方法，从您的要求开始，逐步走向更传统的方法。

我感觉到构建工具的某些过度设计可能正在悄悄出现，因此我强烈建议您重新考虑所有这些是否真的有必要并重新考虑传统方法。

它类似于其他人期望模块如何解析，不需要 Webpack，也不会破坏内部尝试根据此策略解析模块的其他工具，如 eslint-plugin-import .

NormalModuleReplacementPlugin

由于您需要在尝试解析的模块中包含目录名称，因此您可以使用 NormalModuleReplacementPlugin 动态构建解析路径:

new webpack.NormalModuleReplacementPlugin(/modules\/(\w+)$/, (result) => {
    result.request += `/${result.request.split('/').pop()}.module.js`
}

您需要试一试以确保涵盖所有有效名称。

resolve.extensions

如果你真的想以某种方式区分这些模块，那么你可以通过为它们提供特定的扩展来做到这一点:

• modules/util/index.module.js
• modules/dashboard/index.module.js

配置就够了:

{
    resolve: {
        extensions: ['.js', '.module.js']
    }
}

包主

另一种方法是将所有模块提取为包，在 package.json 中指定 {main} .

这将使您走上通往 monorepository 的道路.

常规

传统的方法是将模块命名为index.js:

• modules/util/index.js
• modules/dashboard/index.js