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

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.

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']
    }
}

包主

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

这将使您走向一个单一存储库的道路.

常规

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

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