ホームページ >ウェブフロントエンド >jsチュートリアル >CDN の React Webpack を使用してファイルをパッケージ化する
今回はCDNのreact webpackを使ってファイルをパッケージ化する際の注意事項を紹介します。
この記事では webpack の基本的な構成については紹介しません。基本的な構成について質問がある場合は、公式ドキュメントを参照してください。
1. webpack.config.js を設定します
output.publicPath を、アップロード先の cdn アドレスに変更します (上記のアップロード設定に対応):
publicPath: "https://your_base_cdn_url" + process.env.NODE_ENV + "/cdn/"
パッケージ化
NODE_ENV=production node_modules/webpack/bin/webpack.js -p
パッケージ化されたファイルには、以下が含まれます。例:
index.html 12345678.src.js 12345678.src.css ...
この時点で、cdn ファイルはパッケージ化後に生成されたindex.html ファイルに導入されています。
<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. CDN にファイルをアップロードします
デプロイメント スクリプトで cdn をアップロードするスクリプトを作成します。例:
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"
ホームページ ファイル をサーバーにアップロードし、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;"; } }
を使用してアクセスします。 http:///your_server_name は、CDN によって高速化された Web ページにアクセスできます。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
以上がCDN の React Webpack を使用してファイルをパッケージ化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。