私はまだwebpackでモジュールパスを解決する方法を混同しています。今私は書きます：

myfile = require('../../mydir/myfile.js') 

でも書きたい

myfile = require('mydir/myfile.js') 

エイリアスとして使用している同様の例を見ることができるので、resolve.aliasが役立つかもしれないと考えていました。{ xyz: "/some/dir" }require("xyz/file.js")

しかし、エイリアスをに設定すると{ mydir: '/absolute/path/mydir' }、機能しrequire('mydir/myfile.js') ません。

何度もドキュメントを読んだことがあり、何か不足しているように感じるので、私は馬鹿げていると感じます。相対的な必要事項をすべて書くことを避けるための正しい方法は何../../ですか？

Webpack> 2.0

wtkの回答を参照してください。

Webpack 1.0

これを行うより簡単な方法は、resolve.rootを使用することです。

http://webpack.github.io/docs/configuration.html#resolve-root

resolve.root

モジュールを含むディレクトリ（絶対パス）。ディレクトリの配列の場合もあります。この設定を使用して、個々のディレクトリを検索パスに追加する必要があります。

あなたの場合：

webpack設定

var path = require('path');

// ...

  resolve: {
    root: path.resolve('./mydir'),
    extensions: ['', '.js']
  }

消費モジュール

require('myfile')

または

require('myfile.js')

参照：http : //webpack.github.io/docs/configuration.html#resolve-modulesdirectories

将来の参考のために、webpack 2はmodulesパスを解決する方法として以外はすべて削除しました。この手段はrootなりません動作します。

https://gist.github.com/sokra/27b24881210b56bbaff7#resolving-options

設定例は次で始まります：

{
  modules: [path.resolve(__dirname, "app"), "node_modules"]
  // (was split into `root`, `modulesDirectories` and `fallback` in the old options)

resolve.alias は、あなたが説明したとおりに機能するはずです。そのため、元の質問で機能しないという提案から生じる可能性のある混乱を軽減するための回答としてこれを提供します。

以下のような解決構成により、望ましい結果が得られます。

// used to resolve absolute path to project's root directory (where web pack.config.js should be located)
var path = require( 'path' );
...
{
  ...
  resolve: {
    // add alias for application code directory
    alias:{
      mydir: path.resolve( __dirname, 'path', 'to', 'mydir' )
    },
    extensions: [ '', '.js' ]
  }
}

require( 'mydir/myfile.js' )期待どおりに動作します。そうでない場合は、他の問題があるはずです。

検索パスに追加するモジュールが複数ある場合resolve.rootは理にかなっていますが、相対パスなしでアプリケーションコード内のコンポーネントを参照できるようにするだけの場合はalias、最も簡単で明確なようです。

の重要な利点は、コードを明確にすることができるsのalias名前空間requireを作成できることです。他requireのs からどのモジュールが参照されているかを簡単に確認できるのと同じように、内部モジュールが必要であることを明確にするalias説明的なrequiresを記述できますrequire( 'my-project/component' )。resolve.rootさらに名前空間を指定する機会を与えずに、目的のディレクトリに移動するだけです。

他の誰かがこの問題に遭遇した場合、私はそれを次のように機能させることができました：

var path = require('path');
// ...
resolve: {
  root: [path.resolve(__dirname, 'src'), path.resolve(__dirname, 'node_modules')],
  extensions: ['', '.js']
};

私のディレクトリ構造は次のとおりです：

.
├── dist
├── node_modules
├── package.json
├── README.md
├── src
│   ├── components
│   ├── index.html
│   ├── main.js
│   └── styles
├── webpack.config.js

次に、srcディレクトリのどこからでも呼び出すことができます：

import MyComponent from 'components/MyComponent';

私の最大の問題は、名前空間付きのパスなしで機能していました。このようなもの：

./src/app.js
./src/ui/menu.js
./node_modules/lodash/

これを行うように環境を設定する前に、

require('app.js')
require('ui/menu')
require('lodash')

src重要なコンテキスト情報を隠す暗黙のパスを回避する方がはるかに便利であることがわかりました。

私の目的は次のように要求することです：

require('src/app.js')
require('src/ui/menu')
require('test/helpers/auth')
require('lodash')

ご覧のとおり、すべてのアプリコードは必須のパス名前空間内にあります。これにより、ライブラリ、アプリコード、またはテストファイルを必要とする呼び出しがどれであるかが明確になります。

このために、私は私の解決パスがちょうどであることを確認します node_modulesソースフォルダー内でアプリの名前空間を指定しない限り現在のアプリフォルダーであるますsrc/my_app

これはwebpackのデフォルトです

resolve: {
  extensions: ['', '.jsx', '.js', '.json'],
  root: path.resolve(__dirname),
  modulesDirectories: ['node_modules']
}

環境変数NODE_PATHを現在のプロジェクトファイルに設定すると、さらに良いでしょう。これはより一般的なソリューションであり、webpackなしで他のツールを使用する場合に役立ちます：テスト、リンティング...

私はこのようにWebpack 2でそれを解決しました：

module.exports = {
  resolve: {
    modules: ["mydir", "node_modules"]    
  }
}

配列にさらにディレクトリを追加できます...

Webpack 2を使用してこれを解決しました：

   resolve: {
      extensions: ['', '.js'],
        modules: [__dirname , 'node_modules']
    }

create-react-appを使用している場合は、次.envを含むファイルを追加するだけです。

NODE_PATH=src/

ソース：https : //medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d

このスレッドは古いですが、require.contextについて誰も投稿していないので、これについて触れます。

require.contextを使用して、フォルダを次のように設定できます。

var req = require.context('../../mydir/', true)
// true here is for use subdirectories, you can also specify regex as third param

return req('./myfile.js')

だれかがmyDirの親ディレクトリをwebpackのmodulesDirectoriesに含めることを提案した理由がわかりませんでした。

resolve: {
    modulesDirectories: [
      'parentDir',
      'node_modules',
    ],
    extensions: ['', '.js', '.jsx']
  },

単にbabel-plugin-module-resolverを使用してください：

$ npm i babel-plugin-module-resolver --save-dev

次に、.babelrcルートにファイルがない場合は作成します。

{
    "plugins": [
        [
            "module-resolver",
            {
                "root": ["./"]
            }
        ]
    ]
}

そして、ルートの下のすべては絶対インポートとして扱われます：

import { Layout } from 'components'

VSCode / Eslintのサポートについては、こちらを参照してください。