Comment empaqueter les fichiers JS spécifiés séparément dans le webpack-js tutoriel-php.cn

Comment empaqueter les fichiers JS spécifiés séparément dans le webpack

亚连

Libérer： 2018-06-05 15:47:14

original

2968 Les gens l'ont consulté

Ci-dessous, je partagerai avec vous une méthode d'empaquetage des fichiers JS spécifiés séparément avec webpack. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

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 extrait 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: &#39;./dist/&#39;, //输出目录，index.html寻找资源的地址
 path: BUILD_PATH, // 打包目录
 filename: &#39;[name].[chunkhash].js&#39;, // 输出文件名
 chunkFilename: &#39;[name].[chunkhash].js&#39; // commonChunk 输出文件
 }
}

Copier après la connexion

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>

Copier après la connexion

}

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

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

Copier après la connexion

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: &#39;ip&#39;, minChunks: Infinity}),

Copier après la connexion

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 malheureusement mes connaissances étaient 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: &#39;./src/config/ip.js&#39;, to: &#39;ip.js&#39;},
 ])

Copier après la connexion

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>

Copier après la connexion

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.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.