Home > Web Front-end > JS Tutorial > body text

Package files with CDN's react webpack

php中世界最好的语言
Release: 2018-03-17 15:24:13
Original
2996 people have browsed it

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/"
Copy after login

Packaging

NODE_ENV=production node_modules/webpack/bin/webpack.js -p
Copy after login

The packaged files include

index.html
12345678.src.js
12345678.src.css
...
Copy after login

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>
Copy after login

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"
Copy after login

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;";
 }
}
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!