今回は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 コマンド ラインでディレクトリを入力したときに計算されます。たとえば、私のものは次のとおりです:
[ webpack-demo4] --> 以下に dist ディレクトリと src ディレクトリがあります。設定を実行するときは、webpack-demo4 に移動してから webpack --config webpack- に移動する必要があります。 config.js (または webpack を直接); 出力は設定の出力です: 上記の設定の結果、webpack がパッケージ化された後、dist ディレクトリ内の js は次のようになります。フォルダーは app.bundle.js を生成し、 print.bundle.js。この名前は実際にはエントリ内のキーです。 このモジュールには 2 つの読み込みファイルと CSS ローダーが保存されますもちろん、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>
この例を読んだ後、あなたはこの方法を習得したと思います。の記事、さらにエキサイティングなコンテンツについては、php 中国語 Web サイトの他の関連記事にご注意ください。
関連記事:
VUE で anmate.css を使用する方法IE11 CSS ハックを解決する方法
以上がwebpack3.xのエントリ、出力、モジュール解析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。