Maison > Article > interface Web > Que faut-il faire pour empaqueter les fichiers JS spécifiés avec webpack

Que faut-il faire pour empaqueter les fichiers JS spécifiés avec webpack

php中世界最好的语言original: 2018-03-17 15:25:231714parcourir

Cette fois, je vais vous montrer comment empaqueter le fichier JS spécifié avec webpack. Quelles sont les précautions pour empaqueter le fichier JS spécifié avec webpack. Voici un cas pratique, jetons un coup d'œil.

Contexte

J'ai récemment reçu une demande car je ne suis pas sûr de l'adresse IP back-end accessible par le package front-end généré. Je dois vérifier l'IP dans le projet. Le fichier de configuration est retiré séparément pour faciliter la modification de l'IP lors du déploiement d'exploitation et de maintenance. Par conséquent, vous devez utiliser webpack pour empaqueter les fichiers spécifiés séparément.

CommonsChunkPlugin

module.exports = {
 entry: {
 app: APP_FILE // 入口文件
 },
 output: {
 publicPath: './dist/', //输出目录，index.html寻找资源的地址
 path: BUILD_PATH, // 打包目录
 filename: '[name].[chunkhash].js', // 输出文件名
 chunkFilename: '[name].[chunkhash].js' // commonChunk 输出文件
 }
}

Digression

{

Parlons d'abord de publicPath. Il y a un point à noter ici, c'est-à-dire que le chemin est écrit sous la forme ./dist chemin relatif. Si vous écrivez un chemin absolu comme /dist/, un inconvénient est que lorsque nginx ne place pas le package frontal dans le répertoire racine, index.html ne parviendra pas à accéder à la ressource. Par conséquent, il est recommandé d'écrire un chemin relatif, mais lors de l'utilisation d'un chemin relatif, il y aura un problème potentiel, c'est-à-dire si l'accès de routage du projet lui-même est en mode HTML5 au lieu d'utiliser le hachage (il y a un signe # sur le routage), le projet sera toujours accessible. Le déploiement a échoué. Angular et React auront de tels problèmes. Je n'ai jamais utilisé Vue, donc cela devrait être similaire. La solution à ce stade est d'ajouter la balise base dans l'en-tête de index.html, c'est-à-dire :

<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
 <base href="/" rel="external nofollow" >
</head>

}

webpack lui-même est basé sur modularisation , donc dans la plupart des cas, nous n'avons besoin que d'un seul fichier d'entrée. Pour cette exigence, il est nécessaire d'ajouter un fichier d'entrée en plus de l'application. C'est-à-dire :

 entry: {
 app: APP_FILE // 入口文件
 ip: IP_FILE
 },

Après avoir configuré Webpack de cette manière, le fichier dist imprimera avec succès app.xxx.js et ip.xxx.js, mais le projet packagé signalera toujours une erreur. : maintenir IP Le fichier d'entrée reste inchangé, mais il est traité comme un commonChunk. Autrement dit, ajoutez :

new webpack.optimize.CommonsChunkPlugin({name: 'ip', minChunks: Infinity}),

aux plugins pour vous assurer que ip.xxx.js est chargé en premier et éviter les erreurs.

Inconvénients : cet emballage présente un inconvénient évident, c'est-à-dire que les fichiers emballés sont compressés, ce qui rend peu pratique la modification des fichiers deux fois. (Aucune solution à la compression n'a été trouvée)

CopyWebpackPlugin

La solution finale est de séparer le fichier ip.js de la modularisation du projet, puis en index. html cité séparément. (C'était la solution à laquelle j'avais pensé au début, mais ce n'était pas la solution que je souhaitais, mais je n'avais pas d'autre choix que d'avoir des connaissances limitées et je n'ai pas résolu le problème précédent).

Processus de solution :

Introduisez d'abord CopyWebpackPlugin dans le webpack, code de configuration :

new CopyWebpackPlugin([
  {from: './src/config/ip.js', to: 'ip.js'},
 ])

dans index.html Introduire la balise de script séparément et assurez-vous de configurer un suffixe aléatoire, c'est-à-dire :

<script>
 document.write("<s"+"cript type=&#39;text/javascript&#39; src=&#39;./dist/ip.js?"+Math.random().toString(36).substr(2)+"&#39;></scr"+"ipt>");
</script>

pour empêcher ip.js de causer des problèmes dus à la mise en cache.

Ce qui précède résout le problème de l'empaquetage du webpack spécifié js séparément.

ps : J'espère qu'il existe une meilleure façon de le partager avec moi.

Cette méthode webpack consistant à empaqueter individuellement les fichiers JS spécifiés correspond à tout le contenu partagé par l'éditeur. J'espère qu'elle pourra vous donner une référence et j'espère que vous soutiendrez Script Home.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Implémentation JS du remplissage d'avatar par défaut

Explication détaillée de l'utilisation de babel

Comment gérer le chargement à chaud invalide du serveur de développement Webpack

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Emballer des fichiers avec le webpack React de CDNArticle suivant：Emballer des fichiers avec le webpack React de CDN

Articles Liés

Voir plus