webpack3.xのエントリ、出力、モジュール解析-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

webpack3.xのエントリ、出力、モジュール解析

php中世界最好的语言

Mar 10, 2018 pm 01:56 PM

module output

今回はwebpack3のエントリー、出力、モジュールの分析をお届けします。
現在人気のツールである webpack は 3 つの主要なフロントエンドフレームワークと切り離せないため、それを学習する必要があります

前提条件: ノード環境と npm ツールが存在します (新しいバージョンのノードには付属しています。 npm tools);

ステップバイステップで始めましょう:

1. まず、プロジェクトが保存されている場所としてディレクトリを選択します

cmd ツールを使用してプロジェクトディレクトリに入ります (私の場合は D: webpack-demo4)。 ; 次に、nmp

を使用して

webpack をインストールします: npm install webpack --save-dev ("グローバルインストールは推奨されません"); 完了したら、必要に応じて、npm init を使用してプロジェクトディレクトリに移動します。省略するには、単に npm init -y; を実行します。 dist ディレクトリと src ディレクトリは独自に作成され、dist はコンパイルされたファイルを保存するために使用され、src はさまざまなファイルを含む新しく初期化されたフォルダーです。将来プロジェクトの構築に関連するモジュールがすべてこのディレクトリに配置されます。webpack.config.js は Webpack 構成アイテムです。package.json はノード操作用の構成です。実際、これは webpack 用です);

Webpack.config.js 構成 (当面はこれだけです); まず最初に、この構成が実際にどのように使用されるかを説明します。パッケージ; 1 つずつ説明します。

エントリ: ファイルの先頭を意味します。これは、cmd コマンドラインでディレクトリを入力したときに計算されます。たとえば、私のものは次のとおりです: webpack3.xのエントリ、出力、モジュール解析

[ webpack-demo4] --> 以下に dist ディレクトリと src ディレクトリがあります。設定を実行するときは、webpack-demo4 に移動してから webpack --config webpack- に移動する必要があります。 config.js (または webpack を直接);

出力は設定の出力です: 上記の設定の結果、webpack がパッケージ化された後、dist ディレクトリ内の js は次のようになります。フォルダーは app.bundle.js を生成し、 print.bundle.js。この名前は実際にはエントリ内のキーです。

このモジュールには 2 つの読み込みファイルと CSS ローダーが保存されます

webpack3.xのエントリ、出力、モジュール解析もちろん、webpack を実行する前に npm install style- が必要です。 -dev と npm install file-loader --save -dev; インストールするときは、webpak-demo4 ディレクトリに移動する必要があります

これで、次のように、index002.html が dist ディレクトリに作成されました。

src ディレクトリには 2 つの js ファイルがあります。

<html>
  <head>
   <title>Output Management(输出)</title>
    <meta charset=utf-8>
  </head>
  <body> 
  </body>
</html>
<script src="./js/app.bundle.js"></script>

ログイン後にコピー

重要なことについて話しましょう。 import '../css/style1.css' は、index.js style1.css の相対的なディレクトリの下にあります。 ; たとえば、ボディの背景を青に書きました。また、img の下に画像を保存しました。次に、cmd コマンド Webpack に画像と print.js をそれぞれ導入しました。 ; 画像とスタイルが表示されます; dist ディレクトリを確認すると、パッケージ化された js と画像が表示されます

この例を読んだ後、あなたはこの方法を習得したと思います。の記事、さらにエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事にご注意ください。

VUE で anmate.css を使用する方法

IE11 CSS ハックを解決する方法

以上がwebpack3.xのエントリ、出力、モジュール解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

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

7478

CakePHP チュートリアル

1377

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

Win11 Activation Key Permanent

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

Related knowledge

ModuleNotFoundError: Python モジュールが見つからないエラーを解決するには? Jun 25, 2023 pm 09:30 PM

Python の開発プロセスでは、モジュールが見つからないというエラーがよく発生します。このエラーの具体的な症状は、モジュールのインポート時に Python が ModuleNotFoundError または ImportError の 2 つのエラーのいずれかを報告することです。このエラーは非常に厄介で、プログラムが適切に実行されなくなる可能性があるため、この記事では、このエラーの原因とその解決方法を検討します。 Pyth の ModuleNotFoundError と ImportError

Java9の新機能モジュールモジュラープログラミング方式 May 19, 2023 pm 01:51 PM

Java9 バージョンでは、Java 言語にモジュールという非常に重要な概念が導入されました。 JavaScript コードのモジュール管理に慣れている場合は、Java 9 のモジュール管理を見ると親しみを感じるはずです。 1. Javaモジュールとは何ですか? Java のパッケージと似ている部分ですが、モジュールは Java コードの別のレベルのグループ化を導入します。このような各グループ (モジュール) には、多くのサブパッケージが含まれています。ファイル module-info.java をモジュールのソースコードファイルパッケージのルートに追加することにより、フォルダーとそのサブフォルダーをモジュールとして宣言します。ファイルの構文

フロントエンド出力設定 Feb 19, 2024 am 09:30 AM

フロントエンドの出力構成には特定のコード例が必要です。フロントエンド開発において、出力構成は非常に重要な構成です。これは、プロジェクトのパッケージ化後に生成されるファイルパス、ファイル名、および関連リソースパスを定義するために使用されます。この記事では、フロントエンド出力構成の役割、一般的な構成オプションを紹介し、具体的なコード例を示します。出力構成の役割: 出力構成アイテムは、プロジェクトのパッケージ化後に生成されるファイルパスとファイル名を指定するために使用されます。それがプロジェクトの最終的な成果物を決定します。 webpackなどにパッケージ化されています。

LinuxシステムでNTFSディスクをマウントするときに「モジュールヒューズが見つかりません」という問題を解決するにはどうすればよいですか? Dec 31, 2023 pm 03:17 PM

1. まず、Linux システムカーネル [root@localhost~]#uname-r-p2.6.18-194.el5i6862 を確認し、http://sourceforge.net/projects/linux-ntfs/files/ に移動して rpm パッケージをダウンロードします。まったく同じカーネルが見つからない場合は、最も近いカーネルを見つけることができます。まったく同じものは見つかりませんでした。ダウンロードしたものは次のとおりです: kernel-module-ntfs-2.6.18-128.1.1.el5-2.1.27-0.rr.10.11.i686.rpm3. rpm パッケージ rpm をインストールします-ivhkernel -m

出力、webpack の中心的な概念 Aug 09, 2022 pm 06:32 PM

すべてのアセットをまとめたら、アプリケーションをパッケージ化する場所を webpack に指示する必要があります。 webpack の出力属性には、バンドルされたコードの処理方法が記述されています。次の記事では、webpack の核となる概念の出力 (Output) について詳しく説明しますので、お役に立てれば幸いです。

Vuex モジュール - ステートウェアハウスパーティショニングの使用の概要 Aug 10, 2022 pm 04:01 PM

Vuex は主に、State、Getter、Mutation、Action、Module の 5 つの部分で構成されています。以下では、Vuex モジュールと状態ウェアハウスのセグメンテーションを紹介します。

PHP は GD イメージをブラウザまたはファイルに出力します Mar 21, 2024 am 10:41 AM

この記事では、PHP で GD 画像をブラウザやファイルに出力する方法について詳しく説明しますが、かなり実践的だと思いますので、参考として共有しておきます。 PHP は GD 画像をブラウザまたはファイルに出力しますはじめに phpGD ライブラリは、画像を処理するための強力な機能を提供し、画像を作成、編集、出力することができます。画像は、表示またはさらなる処理のためにブラウザまたはファイルに出力できます。ブラウザへの出力画像をブラウザに出力するには、次の手順を実行します。画像リソースを作成します。 imagecreate() 関数を使用して画像リソースを作成します。画像データのロード: imagepng()、imagejpeg()、または imagegif() を使用します。

wps2019 テーブルを画像にエクスポートする手順 Mar 27, 2024 pm 04:51 PM

1. wps2019 を使用して、編集するテーブルを開きます。 2. wps2019 ウィンドウの左上隅にある [ファイル] メニュー項目をクリックします。 3. ポップアップファイルのドロップダウンメニューで、メニュー項目[画像としてエクスポート]をクリックします。 4. 写真に出力するためのウィンドウが表示されるので、そのウィンドウで出力品質フォーマットを選択します。 5. [形式] ドロップダウンメニューをクリックし、ポップアップメニューで画像として保存する形式を選択します。 6. 最後に、「背面に保存」オプションボタンをクリックして、画像を保存する場所を設定します。 7. [OK] をクリックすると、しばらくして出力が成功したことを示すプロンプトが表示されます。

See all articles