web-dev-qa-db-fra.com

Comment regrouper une bibliothèque avec webpack?

Je veux créer une bibliothèque frontend ..__ C'est pourquoi je veux utiliser webpack. J'aime particulièrement css et le chargeur d'images . Cependant, je ne peux exiger de fichiers non JS que si j'utilise webpack . Étant donné que je construis une bibliothèque, je ne peux pas garantir que l'utilisateur de ma bibliothèque le fera également.

Existe-t-il un moyen de regrouper le tout dans un module UMD pour le publier? J'ai essayé d'utiliser plusieurs points d'entrée, mais je ne peux pas alors avoir besoin du module.

Merci d'avance

javascriptwebpackumd
13
Arwed Mett

Vous pouvez trouver un bon guide pour la création de bibliothèques dans Webpack 2.0 site de documentation . C'est pourquoi j'utilise la syntaxe ver 2 dans webpack.config.js pour cet exemple.

Voici un repo Github avec un exemple de bibliothèque.

Il construit tous les fichiers de src/ (js, png et css) dans un ensemble JS qui pourrait simplement être requis en tant que module umd.

pour cela, nous devons spécifier les paramètres suivants dans webpack.config.js:

output: {
    path: './dist',
    filename: 'libpack.js',
    library: 'libpack',
    libraryTarget:'umd'
},

et package.json devrait avoir:

"main": "dist/libpack.js",

Notez que vous devez utiliser les chargeurs appropriés pour tout ranger dans un seul fichier. par exemple. base64-image-loader au lieu de file-loader

12
Oleg Pro

Le commentaire écrit par @OlegPro est très utile. Je suggère à chacun de lire cet article pour une explication de la façon dont ces choses fonctionnent

http://krasimirtsonev.com/blog/article/javascript-library-starter-using-webpack-es6

Si vous souhaitez pouvoir importer le fichier d’ensemble dans votre projet, vous devez disposer des éléments suivants:

  output: {
    path: path.resolve(__dirname, myLibrary),
    filename: 'bundle.js',
    library: "myLibrary",   // Important
    libraryTarget: 'umd',   // Important
    umdNamedDefine: true   // Important
  },
0
xeiton