ES6 Webpack Относительный импорт - Модуль не найден: Ошибка: не удается разрешить модуль

Question

Я пытаюсь найти некоторую информацию о Webpack и относительном импорте при работе с ES6 и Babel.

У меня есть строка импорта в простой точке входа в моем приложении:

// app.es6 
import * as sayHello from 'sayHello'; 
console.log(sayHello()); 

sayHello.es6 тот же каталог, app.es6. (Содержание sayHello.es6 не имеет значения).

Когда я бегу компилятор Webpack через командную строку:

$ webpack 

я получаю следующее сообщение об ошибке:

ERROR in ./app/app.es6 
Module not found: Error: Cannot resolve module 'sayHello' in /Users/username/Code/projectname/app 

Это решается путем установки путь к относительной:

// app.es6 - note the ./ in the import 
import * as sayHello from './sayHello'; 
console.log(sayHello()); 

Это немного боль, потому что это отличается от примера кода es6 на веб-сайте Babel под Mo дулы.

Вот мой Webpack конфигурации:

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    entry: [ 
    'babel-polyfill', 
    './app/app.es6' 
    ], 
    output: { 
     publicPath: '/', 
     filename: './dist/app.js' 
    }, 
    debug: true, 
    devtool: 'source-map', 
    module: { 
    loaders: [ 
     { 
     test: /\.js|\.es6$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     query: 
     { 
      presets:['es2015'] 
     } 
     } 
    ] 
    }, 
    resolve: { 
    extensions: ['', '.js', '.es6'], 
    }, 
}; 

Вопрос: Знаете ли какой-либо один, почему существует эта разница? Или где соответствующая информация об импорте модулей ES6 содержится в документации Webpack?

Answer 1

Это по дизайну без префикса указывает, что модуль должен быть загружен из каталога node_modules. Вы можете настроить псевдоним в вашем WebPack конфигурации, который будет удалить необходимость относительного импорта модуля

resolve: { 
    alias: { 
    sayHello: '/absolute/path/to/sayHello' 
    }, 
    extensions: ['', '.js', '.es6'] 
} 

Тогда Webpack бы заполнить пробелы в ваших операторов импорта и позволяют опускать относительный путь и import * as sayHello from 'sayHello'; будет работать в течение ваш проект