在Webpack中创建相对于项目根的绝对路径

Question

我发现我需要输入../很多require()文件.我的目录结构包括:

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

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

Answer 1

该resolve.root选项不modifiy如何文件模块都解决了.

带有前缀'/'的必需模块是文件的绝对路径.例如,需要("/家/马/ foo.js")会加载该文件在/home/marco/foo.js.

在/解析为您的文件系统的根.

也许你想要的是将你的js文件夹解析为模块目录.

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.root 的情况下稍微不同地回答这个问题。@dresyecat 所说的一切都是正确的。但是，我只是经历了从各处的相对路径移动到模块路径的相同练习。这是解释可以在 import 语句中使用的三种不同类型路径的文档。

您要求使用模块路径，我认为这是首选的方法。

问题在于，默认情况下，模块路径仅适用于通过 npm 导入的内容，因为解析时的新模块变量默认为 ["node_modules"]。这使您可以非常轻松地从 npm 导入 3rd 方代码。但这意味着使用模块路径导入代码需要更改配置。顺便说一句，这些模块在以前的版本中被称为moduleDirectories。这是解析变量配置的文档。

好的，假设您有这样的目录结构：

project/
    webpack.config.json
    js/
        components
        actions

您可以将模块目录设置为：

resolve: {
    extensions: [ '.ts', '.js', '*' ],
    modules: [ path.resolve(__dirname, "js"), "node_modules"]
}

几个重要的点：

• 如果您使用 npm 拉入 3rd 方代码，请务必包含“node_modules”，否则您的导入将开始失败

• 请务必在您的配置中导入路径组件，以便定义路径

  var path = require('path');

然后，您可以使用以下内容（正如所指出的 - 没有前导 /）使用模块路径形式导入您的组件：

import "actions/fooAction";