2016-06-21 18 views
7

Questa è la mia struttura di cartelleWebpack - Come risolvere il modulo in modo ricorsivo

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?

+1

Non hai paura del conflitto dei nomi dei moduli se costruisci dinamicamente 'modulesDirectories'? È possibile ottenere errori abbastanza rapidamente e cattivi per il debug. – Everettss

+0

webpack avviserà quando c'è duplicato. E le soluzioni a ciò sono esplicitamente importare uno con lo stesso nome con percorsi. O rinominare i duplicati in qualcosa di più significativo, è comunque utile nominare un componente più specifico. –

+1

In che modo il webpack può dire la differenza tra un modulo installato tramite npm e un modulo "locale" (per mancanza di una parola migliore)? Come saprebbe un collega? O futuro tu? Se stai cercando una via d'uscita dall'inferno relativo all'importazione del percorso, probabilmente preferirei vedere [babel-root-import] (https://www.npmjs.com/package/babel-root-import) se sei usando babele o qualcosa di simile se non lo sei, ma sono solo i miei 5 centesimi. – ivarni

risposta

2

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' 
    ] 
}, 
1

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.

+0

Voglio solo importare senza i percorsi. Hai qualche suggerimento per farlo? –

0

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