Question

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

将其包含在其他模块中

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

我知道如果util.module.js是名称index.js，这是有效的，但我怎么能告诉Webpack以同样的方式获取当前的模块条目？

Answer 1

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

我觉得有些过度设计的构建工具可能正在悄悄进入，所以我强烈建议你再考虑所有这些是否真的有必要并重新考虑传统方法。

这类似于其他人希望模块得到解决的方式，不需要Webpack，也不会破坏内部尝试根据此策略解析模块的其他工具，例如eslint-plugin-import。

由于您需要在要尝试解析的模块中包含目录名称，因此可以使用files: [ '../node_modules/babel-polyfill/dist/polyfill.js', 'index.js' ],动态构建解析路径：

NormalModuleReplacementPlugin

您需要解决此问题，以确保涵盖所有有效名称。

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

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

配置：

就足够了

modules/dashboard/index.module.js

另一种方法是将所有模块作为包提取，在package.json中指定{ resolve: { extensions: ['.js', '.module.js'] } }。

这会让您走上monorepository的路径。

传统方法是命名模块{main}：