ホームページ >ウェブフロントエンド >jsチュートリアル >webpackはnode.jsに基づいていますか?
webpackはnode.jsに基づいていますか?
- 青灯夜游オリジナル
- 2022-07-12 18:57:203015ブラウズ
Webpack は、node.js に基づいています。 Webpack は、最新の JavaScript アプリケーション用の静的モジュール パッケージング ツールです。node.js に基づいて開発されています。使用する場合は、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 の一部のパッケージが異なることです (一般的に、使用には影響しません)
cnpm の構成は、次のコード行で完了できます
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm を使用する webpack をインストールします:
cnpm install webpack -g
プロジェクトを作成します
次に、ディレクトリ app を作成します:
mkdir app
下に追加しますアプリ ディレクトリ runoob1.js ファイルのコードは次のとおりです。
app/runoob1.js ファイル
document.write("It works.");index.html ファイルをアプリ ディレクトリに追加します。コードは次のとおりです。
app/index.html ファイル
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>次に、webpack コマンドを使用してパッケージ化します:
webpack runoob1.js bundle.js
上記のコマンドを実行すると、runoob1.js ファイルがコンパイルされ、バンドルが生成されます.js ファイル。成功すると、出力情報は次のようになります:
Hash: a41c6217554e666594cb
Version: webpack 1.12.13
Time: 50ms
Asset Size Chunks Chunk Names
bundle.js 1.42 kB 0 [emitted] main
[0] ./runoob1.js 29 bytes {0} [built]index.html をブラウザで開くと、出力結果は次のようになります:
nodejs チュートリアル! を参照してください。
以上がwebpackはnode.jsに基づいていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。