Maison > Article > interface Web > 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 :
Introduction via CDN
via npm ; Installer et importer ;
Le fichier js tiers est local
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
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 localIl 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 chargeurEn 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!