Webpackの初心者向け紹介

Webpackとは何ですか?

Webpackは、JavaScriptモジュールをコンパイルできるツールです。モジュールバンドラーとも呼ばれます。

多数のファイルがある場合、アプリを実行する単一のファイル(またはいくつかのファイル)を生成します。

多くの操作を実行できます。

  • リソースをまとめるのに役立ちます。
  • 変更を監視し、タスクを再実行します。
  • ES5へのBabelトランスピレーションを実行できるため、ブラウザのサポートを心配することなく最新のJavaScript機能を使用できます。
  • CoffeeScriptをJavaScriptに変換できます
  • インライン画像をデータURIに変換できます。
  • CSSファイルにrequire()を使用できます。
  • 開発用ウェブサーバーを実行できます。
  • ホットモジュールの交換を処理できます。
  • 出力ファイルを複数のファイルに分割して、最初のページヒットでロードする巨大なJSファイルを避けることができます。
  • 木を揺することができます。

Webpackは、フロントエンドでの使用に限定されませんが、Node.jsのバックエンド開発でも役立ちます。

Webpackには多くの前身があり、それらのツールとWebpackの機能には多くの類似点があります。主な違いは、これらのツールはタスクランナーとして知られているのに対して、Webpackはモジュールバンドラーとして生まれたことです。

Webpackは、より焦点を絞ったツールです。アプリへのエントリポイントを指定するだけで(スクリプトタグを含むHTMLファイルでもかまいません)、webpackはファイルを分析し、アプリを実行するために必要なすべてを含む単一のJavaScript出力ファイルにバンドルします。

Webpackのインストール

Webpackは、プロジェクトごとにグローバルまたはローカルにインストールできます。

グローバルインストール

Yarnでグローバルにインストールする方法は次のとおりです。

yarn global add webpack webpack-cli

npmの場合:

npm i -g webpack webpack-cli

これが完了すると、実行できるはずです

webpack-cli

ローカルインストール

Webpackもローカルにインストールできます。 Webpackはプロジェクトごとに更新でき、Webpackを使用しているすべてのプロジェクトを更新するのではなく、小規模なプロジェクトだけで最新機能を使用することに抵抗がないため、推奨セットアップです。

糸付き:

糸追加webpack webpack-cli -D

npmの場合:

npm i webpack webpack-cli --save-dev

これが完了したら、これをpackage.jsonファイルに追加します。

{
  // ...
  「スクリプト」:{
    「ビルド」:「ウェブパック」
  }
}

これが完了したら、次のように入力してWebpackを実行できます。

糸造り

プロジェクトのルート。

Webpackの構成

デフォルトでは、Webpack(バージョン4以降)は、これらの規則を尊重する場合、設定を必要としません。

  • アプリのエントリポイントは./src/index.jsです
  • 出力は./dist/main.jsに置かれます。
  • Webpackは本番モードで動作します

もちろん、必要に応じてWebpackのすべての小さな部分をカスタマイズできます。 Webpackの構成は、プロジェクトルートフォルダーのwebpack.config.jsファイルに保存されます。

エントリーポイント

デフォルトでは、エントリポイントは./src/index.jsです。この簡単な例では、。/ index.jsファイルを開始点として使用します。

module.exports = {
  /*...*/
  エントリ: './index.js'
  /*...*/
}

出力

デフォルトでは、出力は./dist/main.jsに生成されます。この例では、出力バンドルをapp.jsに配置します。

module.exports = {
  /*...*/
  出力:{
    パス:path.resolve(__ dirname、 'dist')、
    ファイル名: 'app.js'
  }
  /*...*/
}

Webpackを使用すると、JavaScriptコードでimportステートメントまたはrequireステートメントを使用して、他のJavaScriptだけでなく、あらゆる種類のファイル(CSSなど)を含めることができます。

WebpackはJavaScriptだけでなく、すべての依存関係を処理することを目的としており、ローダーはそのための1つの方法です。

たとえば、コードでは次を使用できます。

import 'style.css'

このローダー構成を使用して:

module.exports = {
  /*...*/
  モジュール:{
    ルール:[
      {テスト:/\.css$/、使用: 'css-loader'}、
    }]
  }
  /*...*/
}

正規表現は、すべてのCSSファイルを対象としています。

ローダーにはオプションがあります:

module.exports = {
  /*...*/
  モジュール:{
    ルール:[
      {
        テスト:/\.css$/、
        つかいます: [
          {
            ローダー: 'css-loader'、
            オプション:{
              モジュール:true
            }
          }
        ]
      }
    ]
  }
  /*...*/
}

ルールごとに複数のローダーを要求できます。

module.exports = {
  /*...*/
  モジュール:{
    ルール:[
      {
        テスト:/\.css$/、
        つかいます:
          [
            「スタイルローダー」、
            「css-loader」、
          ]
      }
    ]
  }
  /*...*/
}

この例では、css-loaderはCSSのimport 'style.css'ディレクティブを解釈します。その後、style-loaderは、