CDN の React Webpack を使用してファイルをパッケージ化する-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

CDN の React Webpack を使用してファイルをパッケージ化する

php中世界最好的语言

Mar 17, 2018 pm 03:24 PM

react web 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 サイトの他の関連記事に注目してください。

推奨読書:

デフォルトのアバター塗りつぶしを実装するためのJS

babelの使用方法の詳細な説明

以上がCDN の React Webpack を使用してファイルをパッケージ化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7564

CakePHP チュートリアル

1386

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

Related knowledge

React フロントエンドとバックエンドの分離ガイド: フロントエンドとバックエンドの分離と独立したデプロイメントを実現する方法 Sep 28, 2023 am 10:48 AM

React フロントエンドとバックエンドの分離ガイド: フロントエンドとバックエンドの分離と独立したデプロイメントを実現する方法、特定のコード例が必要です今日の Web 開発環境では、フロントエンドとバックエンドの分離がトレンドになっています。フロントエンドコードとバックエンドコードを分離することで、開発作業がより柔軟かつ効率的になり、チームのコラボレーションが促進されます。この記事では、React を使用してフロントエンドとバックエンドの分離を実現し、それによって分離と独立したデプロイの目標を達成する方法を紹介します。まず、フロントエンドとバックエンドの分離とは何かを理解する必要があります。従来の Web 開発モデルでは、フロントエンドとバックエンドが結合されています。

React と RabbitMQ を使用して信頼性の高いメッセージングアプリを構築する方法 Sep 28, 2023 pm 08:24 PM

React と RabbitMQ を使用して信頼性の高いメッセージングアプリケーションを構築する方法はじめに: 最新のアプリケーションは、リアルタイム更新やデータ同期などの機能を実現するために、信頼性の高いメッセージングをサポートする必要があります。 React はユーザーインターフェイスを構築するための人気のある JavaScript ライブラリであり、RabbitMQ は信頼性の高いメッセージングミドルウェアです。この記事では、React と RabbitMQ を組み合わせて信頼性の高いメッセージングアプリケーションを構築する方法を紹介し、具体的なコード例を示します。 RabbitMQ の概要:

React Router ユーザーガイド: フロントエンドルーティング制御の実装方法 Sep 29, 2023 pm 05:45 PM

ReactRouter ユーザーガイド: フロントエンドルーティング制御の実装方法シングルページアプリケーションの人気に伴い、フロントエンドルーティングは無視できない重要な部分になりました。 React エコシステムで最も人気のあるルーティングライブラリとして、ReactRouter は豊富な機能と使いやすい API を提供し、フロントエンドルーティングの実装を非常にシンプルかつ柔軟にします。この記事では、ReactRouter の使用方法と具体的なコード例を紹介します。 ReactRouter を最初にインストールするには、次のものが必要です

PHP、Vue、React: 最適なフロントエンドフレームワークを選択するには? Mar 15, 2024 pm 05:48 PM

PHP、Vue、React: 最適なフロントエンドフレームワークを選択するには?インターネット技術の継続的な発展に伴い、フロントエンドフレームワークは Web 開発において重要な役割を果たしています。 PHP、Vue、React は 3 つの代表的なフロントエンドフレームワークであり、それぞれに独自の特徴と利点があります。使用するフロントエンドフレームワークを選択するとき、開発者はプロジェクトのニーズ、チームのスキル、個人の好みに基づいて情報に基づいた決定を下す必要があります。この記事では、PHP、Vue、React の 3 つのフロントエンドフレームワークの特徴と用途を比較します。

Java フレームワークとフロントエンド React フレームワークの統合 Jun 01, 2024 pm 03:16 PM

Java フレームワークと React フレームワークの統合: 手順: バックエンド Java フレームワークをセットアップします。プロジェクト構造を作成します。ビルドツールを設定します。 React アプリケーションを作成します。 REST API エンドポイントを作成します。通信メカニズムを構成します。実際のケース (SpringBoot+React): Java コード: RESTfulAPI コントローラーを定義します。 React コード: API によって返されたデータを取得して表示します。

ウェブ標準とは何ですか? Oct 18, 2023 pm 05:24 PM

Web 標準は、W3C およびその他の関連組織によって策定された一連の仕様とガイドラインです。HTML、CSS、JavaScript、DOM、Web アクセシビリティおよびパフォーマンスの最適化の標準化が含まれます。これらの標準に従うことで、ページの互換性を向上させることができます。、メンテナンス性とパフォーマンス。 Web 標準の目標は、Web コンテンツをさまざまなプラットフォーム、ブラウザー、デバイス上で一貫して表示および操作できるようにして、より優れたユーザーエクスペリエンスと開発効率を提供することです。

コックピット Web UI から管理アクセスを有効にする方法 Mar 20, 2024 pm 06:56 PM

Cockpit は、Linux サーバー用の Web ベースのグラフィカルインターフェイスです。これは主に、初心者/熟練ユーザーにとって Linux サーバーの管理を容易にすることを目的としています。この記事では、Cockpit アクセスモードと、CockpitWebUI から Cockpit への管理アクセスを切り替える方法について説明します。コンテンツトピック: コックピットエントリモード現在のコックピットアクセスモードの確認 CockpitWebUI からコックピットへの管理アクセスを有効にする CockpitWebUI からコックピットへの管理アクセスを無効にするまとめコックピットエントリモードコックピットには 2 つのアクセスモードがあります。制限付きアクセス: これは、コックピットアクセスモードのデフォルトです。このアクセスモードでは、コックピットから Web ユーザーにアクセスできません。

React を使用して応答性の高いバックエンド管理システムを開発する方法 Sep 28, 2023 pm 04:55 PM

React を使用して応答性の高いバックエンド管理システムを開発する方法インターネットの急速な発展に伴い、日々の業務を処理するために効率的で柔軟で管理が容易なバックエンド管理システムを必要とする企業や組織が増えています。現在最も人気のある JavaScript ライブラリの 1 つである React は、ユーザーインターフェイスを構築するための簡潔で効率的かつ保守しやすい方法を提供します。この記事では、React を使用して応答性の高いバックエンド管理システムを開発する方法と、具体的なコード例を紹介します。まず React プロジェクトを作成します

See all articles

CDN の React Webpack を使用してファイルをパッケージ化する

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック