フロントエンドエンジニアリング: Webpack 構成ガイド

2024-07-12

フロントエンドエンジニアリング: Webpack 構成ガイド

フロントエンドの皆さん、今日は人々が好き嫌いする Webpack について話します。確かに、これはキーボードを叩きたくなるように設定されたビルドツールですが、これなしでは生きていけません。心配しないで、私に従ってください。Webpack 初心者から設定マスターになれることを保証します。

ウェブパックとは何ですか?

簡単に言うと、Webpack は最新の JavaScript アプリケーション用の静的モジュールパッケージ化ツールです。 Webpack はアプリケーションを処理するときに、プロジェクトに必要なすべてのモジュールをマップする依存関係グラフを内部的に構築し、1 つ以上のバンドルを生成します。

高尚に聞こえますか？実際、それは、乱雑なコードファイルを整理して、ブラウザーが理解して実行できるファイルにパッケージ化することです。それは、家にあるすべての服、本、おもちゃを整理整頓してくれる、とても働き者の掃除婦のようなものです。

基本構成

まずはWebpackの基本構成を見てみましょう。作成する webpack.config.js ファイル、これは構成ベースです。

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};
1
2
3
4
5
6
7
8
9

ここ、entry アプリケーションのエントリポイントを指定します。output Webpack に、作成するバンドルを出力する場所と、これらのファイルに名前を付ける方法を指示します。

ローダー: Webpack にさまざまなファイルを理解させます

Webpack 自体は JavaScript と JSON ファイルのみを理解します。ローダーを使用すると、Webpack が他の種類のファイルを処理し、アプリケーションで使用できる有効なモジュールに変換できるようになります。

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /.(png|svg|jpg|gif)$/,
        use: ['file-loader'],
      },
    ],
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

あなたは見ましたか？私たちは Webpack に、「おい、style-loader と css-loader を使用して .css ファイルを処理し、file-loader を使用して画像を処理してください。」と指示します。

プラグイン: Webpack の魔法

プラグインは Webpack のバックボーンです。これらを使用して、パッケージ化の最適化や圧縮から環境内の変数の再定義まで、さまざまなタスクを処理できます。

const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: '我的超酷网页',
    }),
  ],
};
1
2
3
4
5
6
7
8
9
10
11
12

ここでは CleanWebpackPlugin を使用してクリーンアップします /dist フォルダーと HtmlWebpackPlugin を使用して HTML ファイルを生成します。これは、Webpack の右側のアシスタントを 2 人インストールするようなもので、1 人は掃除を担当し、もう 1 人は部屋の装飾を担当します。

モード: 開発ですか、それとも本番ですか?

Webpack が提供する mode 対応するモードの組み込み最適化を使用するように Webpack に指示する構成オプション:

module.exports = {
  mode: 'production', // 或者 'development'
  // ...
};
1
2
3
4

「production」に設定すると、Webpack は JS コードの圧縮などの一連の最適化プラグインを自動的に有効にします。「開発」モードは、高速なビルドと優れた開発エクスペリエンスに重点を置いています。これは、Webpack のために 2 つの帽子をかぶるようなものです。1 つは仕事用の帽子、もう 1 つは休暇用の帽子です。

開発サーバー: ホットアップデートのスリル

webpack-dev-server を使用して、リアルタイムでリロードできるシンプルな Web サーバーを提供します。

module.exports = {
  // ...
  devServer: {
    contentBase: './dist',
    hot: true,
  },
};
1
2
3
4
5
6
7

この構成の後、コードを変更すると、ブラウザが自動的に更新されます。開発プロセスにターボチャージャーを設置するようなものです。

コード分離: すべての卵を 1 つのカゴに入れないでください

コード分割は、Webpack の最も魅力的な機能の 1 つです。コードをさまざまなパッケージに分割し、オンデマンドまたは並行してロードできるようになります。

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};
1
2
3
4
5
6
7
8

この構成は Webpack に「共通のコードを抽出して個別にパッケージ化するのを手伝ってください。」と指示します。これにより、モジュールの繰り返しのロードが回避され、メインパッケージのサイズが削減されます。スーツケースを再度梱包し、頻繁に使用するアイテムを最もアクセスしやすい場所に置くようなものです。

ツリーシェイク：余分な枝や葉を振り落とします。

ツリーシェイキングは、JavaScript コンテキスト内の参照されていないコードの削除を説明するために一般的に使用される用語です。

module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
  },
};
1
2
3
4
5
6

この構成により、実稼働モードでツリーシェイキングが自動的に有効になります。コードを分析して使用されていないコードを特定し、庭師が木を剪定するようにこれらの役に立たないコードを「剪定」します。

要約する

さて、ここまでいろいろいじった後は、Webpack の設定を包括的に理解できるはずです。基本的な構成から高度な機能まで、Webpack の主な機能を説明しました。 Webpack は強力なスイスアーミーナイフのようなものであり、Webpack を正しく使用すると、開発効率とアプリケーションのパフォーマンスを大幅に向上できることに注意してください。

もちろん、Webpack の世界はそれ以上のものです。遅延読み込み、プリロード、キャッシュなど、さらに高度な機能が探索を待っています。ただし、これらの基本をマスターすれば、「私も Webpack 構成マスターです!」と誇らしげに言えるようになります。

最後に、Webpack の公式ドキュメントを頻繁にチェックすることを忘れないでください。なぜなら、変化の激しいフロントエンドの世界では、昨日までベストプラクティスだったものが今日では時代遅れになる可能性があるからです。学習と探索を続ければ、フロントエンドエンジニアリングへの道をさらに前進できるようになります。

さあ、キーボードを手に取り、Webpack の設定作業を始めましょう。すべての間違いはマスターへの道への足がかりであることを忘れないでください。さあ、労働者を殴ってください！

ハイマインタビューミニプログラム

これには、最新の面接経験の共有、実際の面接の質問の分析、2000 を超えるフルスタックの質問バンク、および学校採用やソーシャル採用の面接の場合に関係なく、フロントエンドおよびバックエンドの面接技術マニュアルの詳細な説明が含まれています。プログラミングスキルを向上させるために、落ち着いて取り組むことができます〜

敷石の。さあ、労働者を殴ってください！

ハイマインタビューミニプログラム

[外部リンク画像は転送中です...(img-LBHUGtbe-1720689041341)]

技術共有