WebPACK - Jak rozwiązać moduł rekurencyjnie

Question

To moja struktura folderów

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

ten sposób chcę moduły przywozowe w Home.js

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

Jak config WebPack, tak aby zrozumieć, co moduł Próbuję zaimportować?

Answer 1

Tak to robię. Będzie musiał ręcznie dodać więcej katalogów w tablicy, gdy pojawi się nowy.

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

Answer 2

Nie określasz względnych ścieżek w instrukcjach importu. moduleDirectories nie jest przeznaczony do wypisywania każdego katalogu, tylko do katalogu głównego.

swoje wypowiedzi na przywóz powinny prawdopodobnie wyglądać tak: (Zakładając, że są one dostępne od w app/)

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

Następnie moduleDirectories tylko musi zawierać aplikację „”, a nie jego podfolderów.

Answer 3

Proszę odnieść to

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

i wykonać niezbędną konfigurację w WebPacka rozwiązać ścieżki w czasie wykonywania

Answer 4

Możesz zajrzeć użytku Babel aliasy

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

i skonfigurować coś takiego:

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

Następnie

import Header from 'component/Header'; 

Answer 5

Ten link powinien pomóc:

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

Ale zasadniczo, jeśli plik webpack.[production/dev].config.js jest w /project będzie musiała sekcję alias w sekcji resolve; coś takiego:

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') 
     } 
    } 
};