Emballer des fichiers avec le webpack React de CDN-js tutoriel-php.cn

Emballer des fichiers avec le webpack React de CDN

php中世界最好的语言

Libérer： 2018-03-17 15:24:13

original

3077 Les gens l'ont consulté

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/"

Copier après la connexion

Package

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

Copier après la connexion

Par exemple, les fichiers packagés incluent

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

Copier après la connexion

À 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>

Copier après la connexion

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"

Copier après la connexion

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;";
 }
}

Copier après la connexion

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!