Home > Article > Web Front-end > Package files with CDN's react webpack
Package files with CDN's react webpack
- php中世界最好的语言Original
- 2018-03-17 15:24:132948browse
This time I will bring you the use of CDN's react webpack to package files. What are the precautions for using CDN's react webpack to package files? The following is a practical case, let's take a look.
This article does not introduce the basic configuration of webpack. If you have any questions about the basic configuration, please refer to the official documentation.
1. Configure webpack.config.js
Change output.publicPath to the cdn address uploaded to, example (corresponding to the above upload configuration ):
publicPath: "https://your_base_cdn_url" + process.env.NODE_ENV + "/cdn/"
Packaging
NODE_ENV=production node_modules/webpack/bin/webpack.js -p
The packaged files include
index.html 12345678.src.js 12345678.src.css ...
At this time, the cdn file has been introduced into the index.html file generated after packaging.
<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. Upload files to CDN
Write a script for uploading to CDN in the deployment script, for example:
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"
Upload the home page file to the server, use nginx proxy
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;";
}
}
to access http://your_server_name to access the web page accelerated by CDN.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
JS implements default avatar filling
Detailed explanation of the use of babel
The above is the detailed content of Package files with CDN's react webpack. For more information, please follow other related articles on the PHP Chinese website!