webpackはnode.jsに基づいていますか?-jsチュートリアル-php.cn

webpackはnode.jsに基づいていますか?

青灯夜游

リリース： 2022-07-12 18:57:20

オリジナル

3011 人が閲覧しました

Webpack は、node.js に基づいています。 Webpack は、最新の JavaScript アプリケーション用の静的モジュールパッケージングツールです。node.js に基づいて開発されています。使用する場合は、node.js コンポーネントのサポートが必要です。npm または cnpm を使用してインストールする必要があり、構文は「cnpm install webpack」です。 -g」。

webpackはnode.jsに基づいていますか?

このチュートリアルの動作環境: 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 をブラウザで開くと、出力結果は次のようになります:

webpackはnode.jsに基づいていますか?