Wie kann ich eine mehrteilige Bibliothek mit Webpack einbinden?

Question

Ich erstellte eine mehrteilige Bibliothek ähnlich dem Beispiel von webpack/webpack/.../multi-part-library. In meiner apps möchte ich in der Lage sein, Teile meiner Bibliothek wie diese zu importieren:

ìmport Button from 'myLib/atoms/button'; 

// or 

import { Button } from 'myLib/atoms'; 

Meine webpack Konfiguration für die Apps so aussieht und ich erhalte eine Fehlermeldung (Cannot resolve module 'myLib/atoms' oder Cannot resolve module 'myLib/atoms/button'):

module.exports = { 
    'entry': { 
     'app': './client.js', 
    }, 
    'output': { 
     'filename': 'bundle.js', 
    }, 
    'externals': { 
     'react': true, 
     'react-dom': true, 
     'myLib': true, 
    }, 
    'module': { 
     'loaders': [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel', 
      }, 
     ] 
    }, 
}; 

die webpack Konfiguration für die Bibliothek sieht wie folgt aus:

const files = glob.sync('**/*.js', { 
    cwd: path.join(__dirname, 'atomic-design'), 
    absolute: true, 
}); 

let entries = {}; 

files.forEach((file) => { 
    const name = path.basename(path.dirname(file)); 
    const newName = `atoms/${name}`; 
    entries[newName] = file; 
}); 

module.exports = { 
    'entry': entries, 
    'output': { 
     'path': path.join(__dirname, 'lib'), 
     'filename': 'myLib.[name].js', 
     'library': ['myLib', '[name]'], 
     'libraryTarget': 'umd', 
     'umdNamedDefine': 'myLib', 
    }, 
    'externals': { 
     'react': true, 
     'react-dom': true, 
    }, 
    'module': { 
     'loaders': [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel' 
      }, 
     ] 
    } 
}; 

die Dateien sind wie folgt strukturiert:

- app 
    - client.js 
    - webpack.config.js 
- myLib 
    - webpack.config.js 
    - atomic-design 
     - button 
      - index.js 
     - text-field 
      - index.js 

Bis jetzt konnte ich nur Tutorials zum Erstellen von Bibliotheken mit Webpack finden, wo sie nur kleine Beispiele von Bibliotheken verwenden.

Vielen Dank für Ihre Hilfe im Voraus!

Mit freundlichen Grüßen, JBrieske

Answer 1

Ich glaube, Sie die Pfade hinzufügen müssen (und stellen Sie die from 'path' entsprechend) für die Module, die Sie resolve.modulesDirectories zu importieren versuchen.

Relevante Dokumentation: https://webpack.github.io/docs/configuration.html#resolve-modulesdirectories.

Denken Sie daran, dass this will change in Webpack2, die Feature abgeschlossen ist und nur knapp Dokumentation für eine Version ist.