Webpack - Come risolvere il modulo in modo ricorsivo

Question

Questa è la mia struttura di cartelle

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

Questo è come io voglio moduli di importazione in Home.js

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

Come config webpack in modo da capire quale modulo Sto cercando di importare?

Answer 1

Ecco come lo faccio. Dovrò aggiungere manualmente più directory nell'array quando ce n'è una nuova.

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

Answer 2

Non si specificano percorsi relativi nelle istruzioni di importazione. moduleDirectories non è inteso per elencare ogni directory, solo le radici.

Le sue dichiarazioni di importazione dovrebbero probabilmente simile a questa: (ammesso che sono accessibili da in app/)

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

Poi moduleDirectories ha solo bisogno di includere 'app', non le sottocartelle della stessa.

Answer 3

prega di fare riferimento questo

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

e fare la configurazione necessaria nel vostro webpack per risolvere i percorsi in runtime

Answer 4

Potete guardare l'uso Babel alias

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

e configurare qualcosa di simile:

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

Poi

import Header from 'component/Header'; 

Answer 5

Questo collegamento dovrebbe aiutare:

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

Ma in sostanza, se il file è in webpack.[production/dev].config.js/project avrà bisogno di una sezione all'interno di una sezione aliasresolve; qualcosa di simile:

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