webpackの処理の流れと実装例

webpack Javascript Typescript scss css

webpackの処理の流れ

Webpackは、JavaScriptアプリケーションのためのモジュールバンドラーであり、アプリケーションに必要なすべてのモジュールを取り込み、それらを1つまたは複数のバンドルにまとめます。
一般的なWebpackの処理の流れは以下の通りです：

1. エントリーポイントの指定:
webpackの最初のステップは、アプリケーションのエントリーポイントを特定することです。
通常、このエントリーポイントは、アプリケーションのメインファイルであり、依存関係のチェーンを開始します。

2. 依存関係の解決:
エントリーポイントから始まり、Webpackは依存関係のグラフを構築します。
これには、JavaScriptファイル、CSSファイル、画像など、アプリケーションで使用されるすべてのリソースが含まれます。

3. ローダーの適用:
webpackは、エントリーポイントとその依存関係を処理し、適切なローダーを使用してファイルを変換します。
例えば、TypeScriptファイルをJavaScriptに、SCSSファイルをCSSに変換します。
ローダーは、webpackの設定ファイルで指定された規則に基づいて適用されます。

4. プラグインの適用:
ローダーがファイルを変換した後、プラグインが追加の処理を実行します。
これには、バンドルの最適化、環境変数の注入、バンドルサイズの削減などが含まれます。

5. 出力の生成:
最後に、Webpackはバンドルされた結果を出力します。
出力される形式は、設定によって異なりますが、一般的にはJavaScriptファイルです。
このファイルは、ブラウザで直接読み込むことができるようになります。

このようにして、Webpackは複数のモジュールやリソースを1つまたは複数のバンドルにまとめ、効率的にブラウザで実行できるようにします。

上記を踏まえた実装例

以下は、簡単なWebpackの実装例です。
この例では、エントリーポイントとしてindex.jsを使用し、それに依存するstyles.cssとimage.pngを含めます。

1. プロジェクトディレクトリを作成し、以下のファイルを用意します：

project-directory
│   index.js
│   styles.css
│   image.png
│   webpack.config.js

2. index.jsファイルを次のように作成します：

// index.js
import './styles.css';

console.log('Hello, webpack!');

3. styles.cssファイルを次のように作成します：

/* styles.css */
body {
  background-color: #f0f0f0;
}

4. image.pngは適当な画像ファイルとします。

5. webpack.config.jsファイルを作成し、以下のように設定します：

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

6. 依存関係にあるパッケージをインストールします：

npm install webpack webpack-cli style-loader css-loader --save-dev

7. 以下のコマンドを実行してWebpackを実行します：

npx webpack --config webpack.config.js

これにより、Webpackはエントリーポイントとその依存関係を処理し、distディレクトリにbundle.jsという名前のバンドルファイルを生成します。

これで、distディレクトリ内のbundle.jsファイルをブラウザで読み込むことで、index.jsで定義されたJavaScriptコードが実行され、styles.cssで定義されたスタイルが適用されます。

SCSSを使用する場合

SCSSをWebpackで使用する場合、追加のローダーとしてsass-loaderをインストールし、webpack.config.jsを調整する必要があります。
以下はその手順です：

1. sass-loaderとnode-sass（またはsass）パッケージをインストールします：

npm install sass-loader sass webpack --save-dev

2. styles.scssファイルを作成し、SCSSを含めます：

// styles.scss
$primary-color: #007bff;

body {
  background-color: #f0f0f0;
  color: $primary-color;
}

3. index.jsファイルでstyles.scssをインポートします：

// index.js
import './styles.scss';

console.log('Hello, webpack with SCSS!');

4. webpack.config.jsを調整して、SCSSファイルを処理するためのローダーを追加します：

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

これで、WebpackはSCSSファイルを処理し、CSSに変換してバンドルに含めることができます。
コマンドnpx webpack --config webpack.config.jsを実行すると、distディレクトリにbundle.jsが生成されます。
ブラウザでindex.htmlからこのバンドルを読み込むことで、SCSSから生成されたスタイルが適用されます。

Typescriptを使用する場合

TypeScriptをWebpackで使用する場合、ts-loaderを使用してTypeScriptファイルを処理する必要があります。
以下はその手順です：

1. ts-loaderとtypescriptパッケージをインストールします：

npm install ts-loader typescript --save-dev

2. TypeScriptの設定ファイルtsconfig.jsonをプロジェクトのルートディレクトリに作成します。
必要に応じて、TypeScriptのコンパイラオプションを設定します。
以下は最小限の設定例です：

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true
  }
}

3. TypeScriptで書かれたファイルを作成します。
例えば、index.tsを作成し、次のようなコードを追加します：

// index.ts
function greeter(person: string) {
  return "Hello, " + person;
}

const user = "TypeScript";
console.log(greeter(user));

4. webpack.config.jsを調整して、TypeScriptファイルを処理するためのローダーを追加します：

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: ['.ts', '.js'],
  },
};

5. index.htmlを作成し、生成されたバンドルbundle.jsを読み込むためのスクリプトを追加します：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TypeScript Webpack Example</title>
</head>
<body>
  <script src="dist/bundle.js"></script>
</body>
</html>

6. コマンドnpx webpack --config webpack.config.jsを実行してWebpackを実行します。
これにより、distディレクトリにbundle.jsが生成されます。

7. ブラウザでindex.htmlを開くと、TypeScriptで記述されたコードが実行されます。