Home >Web Front-end >JS Tutorial >react webpack packaged files (detailed tutorial)

react webpack packaged files (detailed tutorial)

亚连Original: 2018-06-05 15:39:182775browse

Below I will share with you a detailed explanation of the files packaged by using CDN to accelerate react webpack. It has a good reference value and I hope it will be helpful to everyone.

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 &#39;index.html&#39; | 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 homepage file to the server and 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;";
 }
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

How to use cropper.js to encapsulate vue to implement the online image cropping component function (detailed tutorial)

Use vue- How to quickly build a single-page application with cli, as well as the problems encountered and some solutions

Using Native in React to implement the image viewing component

The above is the detailed content of react webpack packaged files (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!

Statement：

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

Previous article：How to operate vue.js data bindingNext article：How to operate vue.js data binding

See more

react webpack packaged files (detailed tutorial)

Related articles