如何使用webpack解决绝对路径的require问题？

Question

我正试图将一个现有网站转换为使用 webpack，但所有现有的 require 路径都是绝对路径：

var Component = require('/path/to/my/component');

我一直在阅读webpack文档，并在这篇关于解决路径的答案中找到了一些帮助，但是还无法完全解决我的问题。按照上面答案中的指示设置resolve.root后，以下代码可以正常工作：

var Component = require('./path/to/my/component');
var Component = require('path/to/my/component');

然而，我仍然无法弄清楚如何让绝对路径起作用，我真的很不想去更新所有的路径。以下是网站目录结构：

/app
  /assets
    /javascripts
      /build
        package.js
      index.js
/node_modules 

webpack.config.js:

var JS_ROOT = __dirname + '/app/assets/javascripts');

module.exports = {
  entry: JS_ROOT + '/index',
  output: {
    path: JS_ROOT + '/build',
    filename: 'package.js'
  },
  ...
  resolve: {
    root: JS_ROOT
  }
};

我一直遇到的错误是：

Module not found: Error: Cannot resolve 'file' or 'directory' /path/to/component in /Users/<username>/<ProjectRoot>/app/assets/javascripts

我做错了什么？

- ericgio

---

看起来这基本上就是我想要的。不过我对在哪里定义main字段感到困惑。 - ericgio

你找到解决方案了吗？ - mpolci

可能并不是很有帮助，但我最终只是进行了代码修改，并更改了路径为：var Component = require('path/to/my/component'); - ericgio

Answer 1

resolve.root配置选项可能是您需要的。它在此处有详细说明：http://webpack.github.io/docs/configuration.html#resolve-root resolve.root是包含模块的目录（绝对路径）。也可以是目录数组。此设置应用于将单个目录添加到搜索路径中。

它必须是绝对路径！不要传递类似./app/modules这样的内容。

例如： var path = require('path'); // ... resolve: { root: [ path.resolve('./app/modules'), path.resolve('./vendor/modules') ] }

- Jack Allan

---

path.resolve() 将路径解析为其绝对形式 - 请参见 https://nodejs.org/docs/latest/api/path.html#path_path_resolve_from_to - Sacho