Maison > Article > interface Web > Emballer des fichiers avec le webpack React de CDN

Emballer des fichiers avec le webpack React de CDN

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

Cette fois, je vais vous apporter les précautions pour utiliser le webpack React de CDN pour empaqueter des fichiers. Ce qui suit est un cas pratique, jetons un coup d'œil.

Cet article ne présente pas la configuration de base de webpack. Si vous avez des questions sur la configuration de base, veuillez vous référer à la documentation officielle.

1. Configurez webpack.config.js

Remplacez output.publicPath par l'adresse cdn téléchargée, par exemple (correspondant à ce qui précède configuration de téléchargement ):

publicPath: "https://your_base_cdn_url" + process.env.NODE_ENV + "/cdn/"

Package

NODE_ENV=production node_modules/webpack/bin/webpack.js -p

Par exemple, les fichiers packagés incluent

index.html
12345678.src.js
12345678.src.css
...

À ce stade, le fichier index.html généré après l'emballage a introduit des fichiers cdn.

<html lang="en">
<head>
 <title>title</title>
 <link href="https://your_base_cdn_url/production/cdn/12345678.src.css" rel="external nofollow" rel="stylesheet">
</head>
<body id="body">
 <p id="root"></p>
<script src="https://your_base_cdn_url/production/cdn/12345678.src.js"></script></body>
</html>

2. Téléchargez des fichiers sur CDN

Écrivez un script pour télécharger CDN dans le script de déploiement, par exemple :

echo "start uploading to upyun"
HOST=v0.ftp.upyun.com
USER=uploader/your-username
PASS=your-password
cd build
files=$(ls | grep -v 'index.html' | xargs)
ftp -inv $HOST <<EOF
user $USER $PASS
mkdir /$node_env/cdn
cd /$node_env/cdn
mput $files
bye
EOF
cd ..
echo "finish uploading to upyun"

Téléchargez le fichier de la page d'accueil sur le serveur, utilisez le proxy nginx

server {
 listen 80;
 server_name your_server_name;
 access_log /var/log/nginx/your_project.log;
 root /var/www/your_project/production/current;
 location / {
 try_files $uri /index.html =404;
 add_header Pragma no-cache;
 expires -5y;
 }
 location ~ \.(js|css)$ {
 expires 360000;
 add_header Cache-Control "max-age=360000;";
 }
}

pour visiter http://votre_nom_serveur et accéder à la page Web accélérée par CDN.

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

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：JS implémente le remplissage d'avatar par défautArticle suivant：JS implémente le remplissage d'avatar par défaut

Articles Liés

Voir plus