webpack-dev-server を使用する手順-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

webpack-dev-server を使用する手順

php中世界最好的语言

Apr 08, 2018 pm 02:33 PM

web 使用

今回は、webpack-dev-server の使用手順と、webpack-dev-server を使用する際の注意事項について説明します。以下は実際のケースです。見てみましょう。

webpack-dev-server

webpack-dev-server は、webpack-dev-middleware を使用して webpack パッケージを提供する小さな Node.js Express サーバーです。また、それに接続するための Sock.js も備えています。サーバーのマイクロランタイムです。

設定ファイルを見てみましょう(webpack.config.js)

var path = require("path");
module.exports = {
 entry:{
 app:["./app/main.js"]
 },
 output:{
 path:path.resolve(dirname,"build"),
 publicPath:"/assets/",
 filename:"bundle.js"
}
}

ログイン後にコピー

ここでは、ソースファイルをappフォルダーの下に置き、webpackパッケージをビルドの下のbundle.jsに渡します

注: webpack-dev-server は独立した NPM パッケージであり、npm install webpack-dev-server を通じてインストールできます。

基本ディレクトリ

webpack-dev-server は現在のディレクトリを指定しない限り、デフォルトではベースディレクトリになります。

webpack-dev-server --content-base build/

ログイン後にコピー

上記のコマンドはコマンドラインで実行され、ビルドディレクトリがルートディレクトリとして使用されることに注意してください: webpack-dev-server によって生成されたパッケージ。は実際のディレクトリではなくメモリに配置されます。

基本ディレクトリに新しいindex.htmlファイルを作成し、ブラウザに http:// と入力してlocalhost:8080にアクセスします。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
</head>
<body>
 <script src="assets/bundle.js"></script>
</body>
</html>

ログイン後にコピー

自動更新

webpack-dev-server は、ページを自動的に更新する 2 つのモードをサポートしています。

iframe モード (ページは iframe に配置され、変更が発生すると再ロードされます)
inline モード (webpack のクライアントエントリを追加します) dev-sever をバンドルに追加)

どちらのモードもホットモジュール置換をサポートしています。ホットモジュール置換の利点は、ページのリロードではなく、更新部分のみが置換されることです。

iframe モード

このモードを使用するために追加の設定は必要ありません。、次の URL 形式でアクセスするだけです

http://«host»:«port»/webpack -dev-server/«path»

例: http://localhost:8080/webpack- dev-server/index.html.

インラインモード

インラインモードでは、アクセスする URL を変更する必要はありません。有効にします。このモードには 2 つの状況があります:

1 webpack-dev-server を起動するときコマンドラインでは、次の 2 つのことを行う必要があります:

webpack.config のコマンドラインに --inline コマンドを追加します
js

2 に devServer:{inline:true} を追加しますNode.js API で webpack-dev-server を起動するには、次の 2 つのことも行う必要があります:

webpack-dev-server Inline オプションには設定がないため、webpack-dev-server/client? を追加する必要があります。 http://«path»:«port»/ を webpack 設定のエントリエントリポイントに追加します。
src="http:// localhost:8080/webpack-dev-server.js"><をスクリプトします。 ;/script>HTML ファイルに追加します

 var config = require("./webpack.config.js");
 var webpack = require('webpack');
 var WebpackDevServer = require('webpack-dev-server');
config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {
 contentBase:'build/',
 publicPath: "/assets/"
});
server.listen(8080);

ログイン後にコピー

上記のコードを Node.js で実行します。

注: Webpack 設定の devSever 設定項目は、

コマンドラインモードでのみ有効です。

(ホットモジュール交換) ホットモジュール交換

コマンドラインでインラインモードを実行し、ホットモジュール交換を有効にします

以下に示すように、ここに --hot 命令を追加するだけで問題ありません。

webpack-dev-server --content-base build --inline --hot

ログイン後にコピー

注:コマンドラインモードでは、コンパイルされたパッケージ(バンドル)のアクセス場所を指定するために、webpack.config.jsでoutput.publicPathを設定する必要があります

Nodejs APIでインラインモードを実行し、ホットモジュール置換を有効にします

必須。ここで次の 3 つのことを実行します:

var WebpackDevServer = require("webpack-dev-server");
var webpack = require("webpack");
var compiler = webpack({
 // configuration
});
var server = new WebpackDevServer(compiler, {
 // webpack-dev-server options
 contentBase: "/path/to/directory",
 // Can also be an array, or: contentBase: "http://localhost/",
 hot: true,
 // Enable special support for Hot Module Replacement
 // Page is no longer updated, but a "webpackHotUpdate" message is send to the content
 // Use "webpack/hot/dev-server" as additional module in your entry point
 // Note: this does _not_ add the `HotModuleReplacementPlugin` like the CLI option does. 
 // Set this as true if you want to access dev server from arbitrary url.
 // This is handy if you are using a html5 router.
 historyApiFallback: false,
 // Set this if you want to enable gzip compression for assets
 compress: true,
 // Set this if you want webpack-dev-server to delegate a single path to an arbitrary server.
 // Use "**" to proxy all paths to the specified server.
 // This is useful if you want to get rid of 'http://localhost:8080/' in script[src],
 // and has many other use cases (see https://github.com/webpack/webpack-dev-server/pull/127 ).
 proxy: {
 "**": "http://localhost:9090"
 },
 setup: function(app) {
 // Here you can access the Express app object and add your own custom middleware to it.
 // For example, to define custom handlers for some paths:
 // app.get('/some/path', function(req, res) {
 // res.json({ custom: 'response' });
 // });
 },
 // pass [static options](http://expressjs.com/en/4x/api.html#express.static) to inner express server
 staticOptions: {
 },
 // webpack-dev-middleware options
 quiet: false,
 noInfo: false,
 lazy: true,
 filename: "bundle.js",
 watchOptions: {
 aggregateTimeout: 300,
 poll: 1000
 },
 // It's a required option.
 publicPath: "/assets/",
 headers: { "X-Custom-Header": "yes" },
 stats: { colors: true }
});
server.listen(8080, "localhost", function() {});
// server.close();

ログイン後にコピー

この記事のケースを読んだ後は、この方法をマスターしたと思います。もっとエキサイティングな内容にご注目ください。その他の関連記事は php 中国語 Web サイトにあります。

推奨読書:

H5 キャンバスチャート実装ヒストグラム

Vue プロジェクトを環境ごとにどのようにパッケージ化すべきか

以上がwebpack-dev-server を使用する手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

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

7692

Java チュートリアル

1639

CakePHP チュートリアル

1393

Laravel チュートリアル

1287

PHP チュートリアル

1229

Related knowledge

マグネットリンクの使い方 Feb 18, 2024 am 10:02 AM

マグネットリンクは、リソースをダウンロードするためのリンク方法であり、従来のダウンロード方法よりも便利で効率的です。マグネットリンクを使用すると、中間サーバーに依存せずに、ピアツーピア方式でリソースをダウンロードできます。この記事ではマグネットリンクの使い方と注意点を紹介します。 1. マグネットリンクとは? マグネットリンクは、P2P (Peer-to-Peer) プロトコルに基づくダウンロード方式です。ユーザーはマグネットリンクを通じてリソースの発行者に直接接続し、リソースの共有とダウンロードを完了できます。従来のダウンロード方法と比較して、磁気

mdfおよびmdsファイルの使用方法 Feb 19, 2024 pm 05:36 PM

mdf ファイルと mds ファイルの使用方法コンピューター技術の継続的な進歩により、さまざまな方法でデータを保存および共有できるようになりました。デジタルメディアの分野では、特殊なファイル形式に遭遇することがよくあります。この記事では、一般的なファイル形式である mdf および mds ファイルについて説明し、その使用方法を紹介します。まず、mdf ファイルと mds ファイルの意味を理解する必要があります。 mdf は CD/DVD イメージファイルの拡張子で、mds ファイルは mdf ファイルのメタデータファイルです。

CrystalDiskmarkとはどのようなソフトウェアですか? -crystaldiskmarkの使い方は？ Mar 18, 2024 pm 02:58 PM

CrystalDiskMark は、シーケンシャルおよびランダムの読み取り/書き込み速度を迅速に測定する、ハードドライブ用の小型 HDD ベンチマークツールです。次に、編集者が CrystalDiskMark と Crystaldiskmark の使用方法を紹介します。 1. CrystalDiskMark の概要 CrystalDiskMark は、機械式ハードドライブとソリッドステートドライブ (SSD) の読み取りおよび書き込み速度とパフォーマンスを評価するために広く使用されているディスクパフォーマンステストツールです。 ). ランダム I/O パフォーマンス。これは無料の Windows アプリケーションで、使いやすいインターフェイスとハードドライブのパフォーマンスのさまざまな側面を評価するためのさまざまなテストモードを提供し、ハードウェアのレビューで広く使用されています。

foobar2000のダウンロード方法は？ -foobar2000の使い方 Mar 18, 2024 am 10:58 AM

foobar2000 は、音楽リソースをいつでも聴くことができるソフトウェアです。あらゆる種類の音楽をロスレス音質で提供します。音楽プレーヤーの強化版により、より包括的で快適な音楽体験を得ることができます。その設計コンセプトは、高度なオーディオをコンピュータ上で再生可能デバイスを携帯電話に移植し、より便利で効率的な音楽再生体験を提供シンプルでわかりやすく、使いやすいインターフェースデザイン過度な装飾や煩雑な操作を排除したミニマルなデザインスタイルを採用また、さまざまなスキンとテーマをサポートし、自分の好みに合わせて設定をカスタマイズし、複数のオーディオ形式の再生をサポートする専用の音楽プレーヤーを作成します。過度の音量による聴覚障害を避けるために、自分の聴覚の状態に合わせて調整してください。次は私がお手伝いさせてください

NetEase メールボックスマスターの使用方法 Mar 27, 2024 pm 05:32 PM

NetEase Mailbox は、中国のネットユーザーに広く使用されている電子メールアドレスとして、その安定した効率的なサービスで常にユーザーの信頼を獲得してきました。 NetEase Mailbox Master は、携帯電話ユーザー向けに特別に作成された電子メールソフトウェアで、電子メールの送受信プロセスが大幅に簡素化され、電子メールの処理がより便利になります。 NetEase Mailbox Master の使い方と具体的な機能について、以下ではこのサイトの編集者が詳しく紹介しますので、お役に立てれば幸いです。まず、モバイルアプリストアで NetEase Mailbox Master アプリを検索してダウンロードします。 App Store または Baidu Mobile Assistant で「NetEase Mailbox Master」を検索し、画面の指示に従ってインストールします。ダウンロードとインストールが完了したら、NetEase の電子メールアカウントを開いてログインします。ログインインターフェイスは次のとおりです。

Baidu Netdisk アプリの使用方法 Mar 27, 2024 pm 06:46 PM

クラウドストレージは今日、私たちの日常生活や仕事に欠かせない部分になっています。中国有数のクラウドストレージサービスの 1 つである Baidu Netdisk は、強力なストレージ機能、効率的な伝送速度、便利な操作体験により多くのユーザーの支持を得ています。また、重要なファイルのバックアップ、情報の共有、オンラインでのビデオの視聴、または音楽の聴きたい場合でも、Baidu Cloud Disk はニーズを満たすことができます。しかし、Baidu Netdisk アプリの具体的な使用方法を理解していないユーザーも多いため、このチュートリアルでは Baidu Netdisk アプリの使用方法を詳しく紹介します。まだ混乱しているユーザーは、この記事に従って詳細を学ぶことができます。 Baidu Cloud Network Disk の使用方法: 1. インストールまず、Baidu Cloud ソフトウェアをダウンロードしてインストールするときに、カスタムインストールオプションを選択してください。

BTCC チュートリアル: BTCC 取引所で MetaMask ウォレットをバインドして使用する方法は? Apr 26, 2024 am 09:40 AM

MetaMask (中国語ではリトルフォックスウォレットとも呼ばれます) は、無料で評判の高い暗号化ウォレットソフトウェアです。現在、BTCC は MetaMask ウォレットへのバインドをサポートしており、バインド後は MetaMask ウォレットを使用してすぐにログイン、値の保存、コインの購入などが可能になり、初回バインドで 20 USDT のトライアルボーナスも獲得できます。 BTCCMetaMask ウォレットのチュートリアルでは、MetaMask の登録方法と使用方法、および BTCC で Little Fox ウォレットをバインドして使用する方法を詳しく紹介します。メタマスクウォレットとは何ですか? 3,000 万人を超えるユーザーを抱える MetaMask Little Fox ウォレットは、現在最も人気のある暗号通貨ウォレットの 1 つです。無料で使用でき、拡張機能としてネットワーク上にインストールできます。

Xiaoai スピーカーの使用方法 Xiaoai スピーカーを携帯電話に接続する方法 Feb 22, 2024 pm 05:19 PM

スピーカーの再生ボタンを長押し後、ソフトウェア内でWi-Fiに接続すると使用可能になります。チュートリアル該当するモデル: Xiaomi 12 システム: EMUI11.0 バージョン: Xiaoai Classmate 2.4.21 分析 1 まずスピーカーの再生ボタンを見つけ、長押ししてネットワーク配信モードに入ります。 2 携帯電話の Xiaoai Speaker ソフトウェアで Xiaomi アカウントにログインし、クリックして新しい Xiaoai Speaker を追加します。 3. Wi-Fi の名前とパスワードを入力した後、Xiao Ai に電話して使用することができます。補足: Xiaoai Speakerにはどのような機能がありますか? 1 Xiaoai Speakerには、システム機能、ソーシャル機能、エンターテイメント機能、ナレッジ機能、ライフ機能、スマートホーム、トレーニングプランがあります。概要/注意事項: 簡単に接続して使用するには、Xiao Ai アプリを事前に携帯電話にインストールしておく必要があります。

See all articles

webpack-dev-server を使用する手順

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック