Nodejs は Webpack をビルドします-フロントエンドQ&A-php.cn

Nodejs は Webpack をビルドします

王林

リリース： 2023-05-16 20:41:37

オリジナル

1133 人が閲覧しました

フロントエンドテクノロジーの急速な発展に伴い、フロントエンド開発ツールはますます複雑になっています。重要なツールの 1 つは webpack です。これは、開発者が開発中にモジュールをより簡単に管理できるようにする効率的なモジュールパッケージ化ツールです。この記事では、nodejs を使用して Webpack を構築する方法に焦点を当てます。

1.nodejs と webpack の予備理解

nodejs を使用して Webpack を構築する方法を紹介する前に、まず、nodejs と webpack が何であるかを理解しましょう。

1.1 nodejs とは

Node.js は、Chrome V8 エンジンに基づいた JavaScript 実行環境であり、効率的なイベント駆動型のノンブロッキング I/O モデルを使用して、バックエンドの機能を提供します。開発の終了効率的で軽量な開発環境。 Node.js を使用すると、サーバー側で JavaScript を実行できるため、JavaScript 言語を使用してサーバー側アプリケーションを開発できます。

1.2 webpack とは

Webpack は、最新の JavaScript アプリケーション用の静的モジュールバンドラーです。 Webpack はアプリケーションを処理するときに、アプリケーションが必要とするすべてのモジュールを含む依存関係グラフを内部的に構築し、1 つ以上のバンドルを生成します。これらのバンドルは、ブラウザーにロードできる静的ファイルです。

2.nodejs をインストールする

nodejs を使用して Webpack を構築し始める前に、nodejs をシステムにインストールする必要があります。公式 Web サイト https://nodejs.org/en/ からインストーラーをダウンロードでき、インストールプロセスは非常に簡単です。

3. npm の初期化

nodejs をインストールした後、プロジェクトで npm (Node.js パッケージマネージャー) を使用する必要があります。プロジェクトのルートディレクトリで次のコマンドを実行することで、npm を初期化できます:

npm init

ログイン後にコピー

その後、npm はプロジェクト名、作成者、バージョンなどのいくつかの質問をします。プロンプトに従って、関連するコンテンツを入力するだけです。完了すると、npm はプロジェクトの基本情報と依存関係情報を含む package.json ファイルを生成します。

4. webpack のインストール

npm が初期化されたら、webpack をインストールする必要があります。グローバルまたはローカルにインストールできます。

4.1 Webpack をグローバルにインストールする

次のコマンドを実行して Webpack をグローバルにインストールできます:

npm install webpack -g

ログイン後にコピー

これにより、プロジェクト内のどこでも使用できるグローバル Webpack が作成されます。

4.2 webpack の部分インストール

部分インストールでは、webpack がプロジェクトの node_modules フォルダーにインストールされます。次のように webpack をインストールできます:

プロジェクトのルートディレクトリで次のコマンドを実行して、空の package.json ファイルを作成します:

npm init -y

ログイン後にコピー

プロジェクト内ルートディレクトリ webpack と webpack-cli をインストールするディレクトリで次のコマンドを実行します。

npm install webpack webpack-cli --save-dev

ログイン後にコピー

上記のコマンドでは、--save-dev は開発依存関係 (devDependency) に依存関係を追加することを意味します。

完了後、プロジェクトのnode_modulesフォルダーにwebpackとwebpack-cliが見つかります。

5. webpack のビルド

webpack をインストールしたら、webpack のビルドを開始できます。始める前に、webpack のエントリファイルと出力ファイルを作成する必要があります。

5.1 エントリファイルの作成

プロジェクトルートディレクトリに、他の JavaScript ファイルをインポートする必要がある、index.js という名前のファイルをエントリファイルとして作成できます。この例では、hello.js という単純な JavaScript ファイルをインポートするだけです。

// index.js
import hello from './hello.js';

console.log(hello());

ログイン後にコピー

5.2 出力ファイルの作成

出力用のファイルを作成する必要があります。プロジェクトのルートディレクトリに dist フォルダーを作成し、出力ファイルに Bundle.js という名前を付けます。

// dist/bundle.js

ログイン後にコピー

5.3 Webpack 構成ファイルの作成

次に、Webpack 構成ファイル A を作成する必要があります。簡単な設定ファイル。プロジェクトのルートディレクトリに webpack.config.js という名前のファイルを作成し、次の内容を入力します。

const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

ログイン後にコピー

上記のコードでは、まず Node.js の Path モジュールをインポートしてパスを作成し、次に定義済み出力ファイルのパスとファイル名は、JavaScript と一緒にバンドルされます。エントリは、Webpack がビルドを開始するエントリポイントを指定します。これにより、アプリケーションの内部依存関係グラフが検索されます。

6. webpack の実行

webpack のセットアップが完了したので、webpack を実行してアプリケーションを構築できます。

6.1 webpack をグローバルに実行する

以前に webpack をグローバルにインストールしたことがある場合は、コマンドプロンプトに次のコマンドを入力できます:

webpack

ログイン後にコピー

このコマンドを実行すると、Webpack は次のコマンドを使用します。プロジェクトのルートディレクトリにある webpack 構成ファイルを使用して、エントリファイルindex.js をバンドルファイルbundle.js にコンパイルし、dist フォルダーに保存します。

6.2 webpack をローカルで実行する

以前に webpack と webpack-cli しかインストールしていない場合は、コマンドプロンプトに次のコマンドを入力して webpack を実行できます:

npx webpack

ログイン後にコピー

Afterこのコマンドを実行すると、webpack はインストールしたローカルバージョンを実行し、webpack.config.js ファイルの設定を使用してアプリケーションを構築します。

7. 概要

この記事では主に、nodejs を使用して webpack を構築する方法について説明し、初期化、インストール、webpack のエントリファイルと出力ファイルの作成、webpack 設定ファイルの作成、そして、アプリケーションを構築するためのすべてのステップに対して webpack を実行します。 webpack を使用すると、フロントエンドの開発効率が最適化され、開発中にモジュールをより簡単に管理および整理できるようになります。

以上がNodejs は Webpack をビルドしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。