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

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

php中世界最好的语言

リリース： 2018-03-10 13:56:07

オリジナル

1989 人が閲覧しました

今回は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 サイトの他の関連記事を参照してください。