Webpack - Как разрешить модуль рекурсивно

Question

Это моя структура

project 
    |app 
    |component 
     |Header.js 
     |Home.js 
    |sass 
     |header.scss 
    |node_modules 
    |moment 

папка Это, как я хочу импортировать модули в Home.js

import Header from 'Header' 
import 'header.scss' 
import moment from 'moment' 

Как конфиг WebPack так, что понять, что модуль Я пытаюсь импортировать?

Answer 1

Вот как я это делаю. Нужно вручную добавить больше каталога в массив, когда есть новый.

resolve: { 
    modulesDirectories: [ 
     'app', 
     'app/component', 
     'app/sass', 
     'node_modules', 
     'bower_components' 
    ] 
}, 

Answer 2

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

Ваши операторы импорта должны, вероятно, выглядеть следующим образом: (Предполагая, что они доступны из в app/)

import './component/Header' 
import './sass/header.scss' 

Тогда moduleDirectories нужно только включить «приложение», а не подпапки их.

Answer 3

Пожалуйста, обратитесь эту

https://webpack.github.io/docs/configuration.html#resolve

и сделать необходимые настройки в вашем WebPack разрешить пути в режиме исполнения

Answer 4

Вы можете посмотреть на использование Бабель псевдонимами

https://www.npmjs.com/package/babel-plugin-module-alias

и настройки что-то вроде этого:

{ "src": "./app/component", "expose": "component" } 

Тогда

import Header from 'component/Header'; 

Answer 5

Эта ссылка поможет:

http://xabikos.com/2015/10/03/Webpack-aliases-and-relative-paths/

Но по сути, если ваш файл webpack.[production/dev].config.js в /project это потребуется alias раздел внутри resolve секции; что-то вроде этого:

module.exports = { 
    entry: path.resolve(__dirname, "./app/component/Home.js"), 
    output: { 
     path: __dirname, 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { test: /\.css$/, loader: "style!css" } 
     ] 
    }, 
    resolve: { 
     alias: { 
      moment: path.resolve(__dirname, './node_modules/moment/moment.js') 
     } 
    } 
};