Une brève analyse de la façon d'introduire des bibliothèques tierces via webpack

Cet article vous présente une brève analyse de la façon d'introduire des bibliothèques tierces via webpack. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

De manière générale, il existe trois situations lors de l'introduction de bibliothèques tierces :

1. Introduction via CDN

2. via npm ; Installer et importer ;

3. Le fichier js tiers est local

via CDN

C'est le plus simple pour Par exemple, si vous introduisez Amap, vous pouvez directement mettre le code suivant en bas du fichier index.html Cette situation n'a rien à voir avec webpack, car le fichier d'entrée de webpack n'est pas ici

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=您申请的key值"></script>

npm

Les packages installés via npm install seront placés dans le dossier des modules de nœud Lorsqu'ils sont utilisés, ils peuvent être introduits directement en haut des fichiers utilisés, comme import ou require. Mais si chaque fichier modulaire doit être utilisé, alors chaque fichier doit introduire ce fichier tiers, ce qui est très fastidieux. Pour le moment, vous pouvez utiliser le plug-in webpack : ProvidePlugin. -in consiste à intégrer la bibliothèque tierce et sa portée est mondiale.

Par exemple, si vous introduisez jquery

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
})

, vous pouvez utiliser $ et jQuery. Les deux représentent jquery. Il convient de noter que la valeur après $ et jQuery (jquery) doit être la valeur. comme dans npm install jquery. Le jquery doit être cohérent, sinon il ne sera pas trouvé.

Fichier de bibliothèque JS local

Il y aura une situation : le fichier js tiers est local, comment l'introduire via webpack ? Par exemple, dans le deuxième cas de jquery, si vous écrivez

new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery'
})

comme ceci, jquery ne sera certainement pas trouvé, car il n'est pas dans les modules du nœud. Dans ce cas, vous pouvez utiliser la résolution. option dans la configuration du webpack pour spécifier un alias jquery et configurer son chemin.

Si notre fichier jquery.js est placé sous le dossier dist

resolve:{
    alias: {
      $: path.resolve(__dirname, './dist/jquery.js'),
      jQuery: path.resolve(__dirname, './dist/jquery.js'),
    }
}

C'est tout.

Grâce au chargeur

En plus du plug-in ProvidePlugin, il existe également un chargeur d'importation qui peut compléter le travail d'introduction de bibliothèques tierces.

testez pour spécifier quel fichier doit introduire une bibliothèque tierce et configurez jquery via les options. Ensuite, après l'empaquetage, vous pouvez voir que le fichier app.js empaqueté devient plus volumineux.

module: {
        rules: [
            {
                test: path.resolve(__dirname, "./src/app.js"),
                use: "imports-loader"
                options:{
                    $:'jquery'
                }
            }
        ]
    }

Recommandations associées :

Explication détaillée de la configuration du webpack4.0

Pour vue config / index.js : Explication détaillée de la configuration

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!