close

Webpack 初心者向けガイド

Webpack は、最新の Web 開発において非常に便利なツールであり、プロジェクトのリソース管理と最適化に役立ちます。 初心者向けの使用方法に関する基本ガイドは次のとおりです Webpack。

インストール Webpack

まず、Node.js をインストールします(まだインストールしていない場合)。 次に、プロジェクトのディレクトリを作成し、そのディレクトリでターミナル/コマンド プロンプト ウィンドウを開きます。 次のコマンドを実行して Webpack webpack-cli(Webpack のコマンドライン インターフェイス) をインストールします。 

npm install webpack webpack-cli --save-dev

Webpack 構成 の作成

webpack.config.js プロジェクト ディレクトリのルートに という名前のファイルを作成します。 ここで設定を行います Webpack。 

const path = require('path');  
  
module.exports = {  
  entry: './src/index.js', // Entry point of your application  
  output: {  
    filename: 'bundle.js', // Output file name  
    path: path.resolve(__dirname, 'dist') // Output directory  
  }  
};

フォルダーとファイルの作成

ルート ディレクトリにフォルダーを作成し、その中に アプリケーションのメイン ファイルとして機能する src 名前のファイルを作成します。 index.js

走る Webpack

を開いて Terminal 次のコマンドを実行し、 を使用してソース コードをコンパイルします Webpack。 

npx webpack

このコマンドを実行すると、 Webpack 設定に従ってファイルがコンパイルされ、ディレクトリ に index.js 名前付きの出力ファイルが作成されます 。 bundle.js dist

HTMLでの使用

dist ディレクトリまたは任意の場所 に HTML ファイルを作成し、その bundle.js ファイルにリンクします。 

<!DOCTYPE html>  
<html>  
<head>  
  <title>Webpack App</title>  
</head>  
<body>  
  <script src="bundle.js"></script>  
</body>  
</html>

アプリケーションを実行する

ブラウザで HTML ファイルを開き、アプリケーションが動作しているかどうかを確認します。

これは単なる基本的なガイドです。 Webpack には、CSS の処理、モジュールの管理、ローダーとプラグインの使用、ソース コードの最適化など、多くの強力な機能があります。 Webpack このツールの機能を最大限に活用するには、 公式ドキュメントを参照してください。