3

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

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

我知道如果util.module.js是 name这index.js可行，但是我如何告诉 Webpack 以相同的方式获取我当前的模块条目？

4

1 回答 1

6

我将尝试概述一些现成的方法，从您的需求开始，然后朝着更传统的方向发展。

我感觉到构建工具的一些过度工程可能正在蔓延，所以我强烈建议您再次考虑所有这些是否真的有必要并重新考虑传统方法。

这类似于其他人期望模块被解析的方式，不需要 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中指定。

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

传统的

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

  • modules/util/index.js
  • modules/dashboard/index.js
于 2016-11-24T10:57:49.753 回答