webpackはnode.jsをベースにしています。 Webpack は、最新の JavaScript アプリケーション用の静的モジュール パッケージ化ツールです。node.js に基づいて開発されています。使用する場合は、npm または cnpm を使用してインストールする必要があります。構文は「cnpm install webpack」です。 -g」。
このチュートリアルの動作環境: Windows 7 システム、nodejs バージョン 16、DELL G3 コンピューター。
Webpack は、入口、出口、ローダー、プラグインを備えたコード コンパイル ツールです。 webpack は、最新の JavaScript アプリケーション用の静的モジュール バンドル ツールです。モジュールの依存関係に基づいて静的分析を実行し、指定されたルールに従ってこれらのモジュールに対応する静的リソースを生成します。
Webpack はアプリケーションを処理するときに、プロジェクトで必要な各モジュールにマップする依存関係グラフを内部的に構築し、1 つ以上のバンドルを生成します。
Webpack は、node.js に基づいて開発されたフロントエンド パッケージング ツールです。使用する場合は、node.js コンポーネントのサポートが必要です。
Webpackのインストール
① Webpackの動作はNode.jsに依存するため、先にNode.jsをインストールする必要があります。
インストールが完了したら、コマンド ライン ウィンドウに次の 2 行のコマンドを入力します。バージョン番号が表示されれば、インストールは成功です。
$ node -v$ npm -v
② 次に、npm (Node.js ベースのパッケージ管理ツール) を介して Webpack をインストールします
。npm のソースが海外にあるため、インストール速度が遅い場合があります。タオバオのnpm Mirror cnpmを使用することをお勧めします。ただし、注意すべき点は、cnpm の一部のパッケージが異なることです (通常、使用には影響しません)。
次のコード行$ npm install -g cnpm --registry=https を
使用して cnpm の構成を完了できます
。://registry .npm.taabao.org
cnpm を使用して webpack をインストールします:
cnpm install webpack -g
プロジェクトを作成します
次に、ディレクトリ app を作成します:
mkdir app
runoob1.js ファイルを app ディレクトリに追加します。コードは次のとおりです。
app/runoob1.js file
document.write ("It works."); app ディレクトリにindex.html ファイルを追加します。コードは次のとおりです。
app/index.html ファイル
<html>
<頭>
<meta charset="utf-8">
</head>
<本文>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>次に、webpack コマンドを使用してパッケージ化します。
webpack runoob1.jsbundle.js上記のコマンドを実行すると、runoob1.js ファイル
が
コンパイルされ、bundle.js ファイルが生成されます。成功すると、出力情報は次のようになります。
: a41c6217554e666594cb
バージョン: webpack 1.12.13
時間: 50ミリ秒
アセット サイズ チャンク チャンク名
Bundle.js 1.42 kB 0 [発行済み] メイン
[0] ./runoob1.js 29 バイト {0} [built]ブラウザでindex.htmlを開くと、出力結果は次のようになります。
