Сделать абсолютные пути относительно корня проекта в Webpack

Я нахожу, что мне нужно набирать ../ много для require() файлов. Моя структура каталогов включает в себя:

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

Из папки компонентов мне нужно import foo from '../actions/fooAction'. Возможно ли сделать корневой каталог корнем проекта? Т.е. я хочу сделать import foo from '/actions/fooAction'. Я попытался установить параметр Webpack resolve.root, но он ничего не делал.

ОТВЕТЫ

Ответ 1

Параметр resolve.root не модифицирует способы удаления файловых модулей.

Необходимым модулем с префиксом "/" является абсолютный путь к файлу. Например, require ('/home/marco/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'

Имейте в виду отсутствие / в начале.

Ответ 2

Процесс разрешения в основном прост и различает три варианта:

Абсолютный путь: require ("/home/me/file")

относительный путь: require ("../src/file") или require ("./file")

путь модуля: require ("module/lib/file")

Первые два довольно очевидны, третий заслуживает более пристального взгляда:

  1. Абсолютно для вашей файловой системы

  2. Относительно текущего файла (если этот файл находится в src/foo/bar или webpack/config/subconfig, то действительно, что он...)

  3. В отличие от import (который обрабатывает 1 + 2 в значительной степени одинаково, но сразу отправит вам поиск в node_modules) path 'module' действительно означает ваш root проекта для путей без необходимости разрешения, например output.path в вашем веб-пакете config... и: (при разрешении) Только 3 разрешено разрешать. resolve.root и resolve.moduleDirectories, см. здесь документы webpack

Ответ 3

Я собираюсь ответить на это несколько иначе, не используя resolve.root. Все, что сказал @dresyecat, верны. Тем не менее, я просто прошел одно и то же упражнение, перемещаясь от относительных путей всюду к модульным путям. Вот документ, который объясняет три разных типа путей, которые вы можете использовать в инструкции import.

Вы просите использовать путь к модулю, который, я считаю, является предпочтительным способом.

Проблема в том, что по умолчанию пути к модулю работают только с данными, импортированными через npm, потому что новая переменная модулей по умолчанию по умолчанию имеет значение ["node_modules"]. Это позволяет вам легко импортировать сторонний код из npm. Но это означает, что для импорта вашего кода с помощью пути к модулю требуется изменение конфигурации. BTW, модули, которые раньше назывались moduleDirectories в предыдущих версиях. Ниже приведены документы для конфигурации переменной разрешения.

Предположим, что у вас есть структура каталогов:

project/
    webpack.config.json
    js/
        components
        actions

Вы можете установить каталог модулей:

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

Пара важных моментов:

  • Обязательно включите "node_modules", если вы используете npm для вытягивания стороннего кода, или ваш импорт этих файлов начнет сбой

  • Обязательно импортируйте компонент пути в свою конфигурацию, чтобы определить путь

    var path = require ('path');

Затем вы можете использовать следующее (как было указано - без ведущего /) для импорта ваших компонентов с использованием формы пути модуля:

import "actions/fooAction";