前两个非常明显，第三个值得仔细研究：

Question

我发现我需要在../个文件中输入require()。我的目录结构包括：

js/
  components/
    ...
  actions/
    ...

从components文件夹中，我需要import foo from '../actions/fooAction'。是否可以将根目录作为项目的根目录？即我想改为import foo from '/actions/fooAction'。我尝试设置Webpack的resolve.root选项，但它似乎没有做任何事情。

Answer 1

resolve.root选项不会修改 file modules的解析方式。

前缀为“/”的必需模块是文件的绝对路径。例如，require（'/ home / marco / foo.js'）将在/home/marco/foo.js加载文件。

/解析为文件系统的根目录。

也许您想要的是将js文件夹解析为modules directory。

<强> webpack.config.js

resolve: {
  root: path.resolve('./js')
}

使用此配置添加到您的配置文件将告诉webpack解析相对于您的import文件夹的任何require或js。然后，而不是使用

import foo from '../actions/fooAction'

你将能够：

import foo from 'actions/fooAction`

注意开头缺少/。

Answer 2

其他解决方案是使用resolve.alias像模块一样导入 js （我不是说这是一个模块，只是语法相似）。

resolve: {
  alias: {
    js: path.resolve(__dirname, './js'),
  },
}

您可以通过以下方式导入fooAction：

import foo from 'js/actions/fooAction';

Answer 3

现在您应该使用

resolve: {
    roots: [
        path.resolve(__dirname, 'src', 'components'),
    ],
},

查看更多https://webpack.js.org/configuration/resolve/#resolveroots

Answer 4

解决过程基本上很简单，区分了三种变体：

绝对路径： require（“/ home / me / file”）

相对路径： require（“../ src / file”）或require（“./ file”）

模块路径：require（“module / lib / file”）

前两个非常明显，第三个值得仔细研究：

确实是您文件系统的绝对
相对于当前文件（如果该文件位于src/foo/bar或webpack/config/subconfig，那么确实就是这样......）
与import（处理1 + 2几乎相同，但会立即向node_modules发送）路径'模块'确实意味着您的项目根目录无需解析的路径，例如您的网络包配置中的output.path ...以及:(解析时）只有3个受resolve.root和resolve.moduleDirectories解析，{{3 }}

在Webpack

4 个答案:

前两个非常明显，第三个值得仔细研究：