🤯 🌻 👨🏾‍🎤 Webpack：ビギナーズガイド 🚵🏻 🤷 🙍🏾

良い一日、友達！Tyler McGinnisによる

記事「Webpack：穏やかな紹介」の翻訳を紹介します。

新しいテクノロジーを検討する前に、次の2つの質問を自問してください。

なぜこのツールが必要なのですか？
どのようなタスクを実行しますか？

これらの質問に答えられない場合は、勉強しているテクノロジーは必要ないかもしれません。Webpackに関連してこれらの質問に答えてみましょう。

なぜウェブパックが必要なのですか？

Webpackはモジュールビルダーです。アプリケーションモジュールを解析し、依存関係グラフを作成してから、モジュールを正しい順序で1つ以上のバンドルにアセンブルします。これらのバンドルは、「index.html」ファイルで参照できます。

App.js ->       |
Dashboard.js -> | Bundler | -> bundle.js
About.js ->     |

webpackはどのような問題を解決しますか？

通常、JavaScriptアプリケーションを作成するとき、コードはいくつかの部分（モジュール）に分割されます。次に、「index.html」ファイルで、各スクリプトへのリンクを指定する必要があります。

<body>

    ...
    
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="libs/react.min.js"></script>
    <script src='src/admin.js'></script>
    <script src='src/dashboard.js'></script>
    <script src='src/api.js'></script>
    <script src='src/auth.js'></script>
    <script src='src/rickastley.js'></script>
</body>

これは面倒なだけでなく、エラーが発生しやすくなります。スクリプトを忘れるだけでなく、正しい順序で配置することも重要です。React自体をロードする前にReactに依存するスクリプトをロードすると、アプリケーションが破損します。Webpackはこれらの問題を解決します。すべてのスクリプトを順番に含めることを心配する必要はありません。

<body>

    ...
    
    <script src='dist/bundle.js'></script>
</body>

すぐに学習するように、モジュールの収集はWebpackの動作の1つの側面にすぎません。必要に応じて、バンドルに追加する前に、Webpackにいくつかのモジュール変換を強制することができます。たとえば、SASS / LESSを通常のCSSに変換したり、古いブラウザの場合は最新のJavaScriptをES5に変換したりします。

Webパックのインストール

npmを使用してプロジェクトを初期化した後、Webpackを機能させるには、2つのパッケージ（webpackおよび）をインストールする必要がありますwebpack-cli。

npm i webpack webpack-cli -D

webpack.config.js

これらのパッケージをインストールした後、Webパックを構成する必要があります。これを行うためにwebpack.config.js、オブジェクトをエクスポートするファイルが作成されます。このオブジェクトには、Webpack設定が含まれています。

module.exports = {}

Webpackの主なタスクは、モジュールを分析し、それらをオプションで変換し、それらを1つ以上のバンドルにインテリジェントに結合することです。そのため、Webpackは次の3つのことを知る必要があります。

アプリケーションエントリポイント
実行する変換
生成されたバンドルを配置する場所

エントリーポイント

アプリケーションに含まれるモジュールの数に関係なく、常に単一のエントリポイントがあります。このモジュールには残りが含まれています。通常、このファイルはindex.jsです。次のようになります。

index.js
  imports about.js
  imports dashboard.js
    imports graph.js
    imports auth.js
      imports api.js

このファイルへのパスをWebpackに指示すると、Webpackはそれを使用してアプリケーションの依存関係グラフを作成します。これを行うentryには、メインファイルへのパスの値を使用してWebpack設定にプロパティを追加する必要があります。

module.exports = {
    entry: './app/index.js'
}

ローダーによる変換

エントリポイントを追加した後、バンドルを生成する前に実行する必要のある変換についてWebパックに通知する必要があります。このために、ローダーが使用されます。

デフォルトでは、オペレーターベースの依存関係グラフを生成する場合、import / require()WebpackはJavaScriptファイルとJSONファイルのみを処理できます。

import auth from './api/auth' // 
import config from './utils/config.json' // 
import './styles.css' // ️
import logo from './assets/logo.svg' // ️

アプリケーションでJSファイルとJSONファイルに制限することはほとんどありません。ほとんどの場合、スタイル、SVG、画像なども必要になります。そこでローダーが登場します。ローダーの主なタスクは、その名前が示すように、WebパックがJSファイルやJSONファイル以外のものでも機能するようにすることです。

最初のステップは、ローダーをインストールすることです。SVGをロードしたいので、npmを使用してsvg-loaderをインストールします。

npm i svg-inline-loader -D

次に、それをWebpack設定に追加します。すべてのローダーはオブジェクトの配列に含まれていますmodule.rules：

module.exports = {
    entry: './app/index.js',
    module: {
        rules: []
    }
}

ローダー情報は2つの部分で構成されています。1つ目は、処理されているファイルのタイプです（.svgこの場合）。2つ目は、このタイプのファイル（このsvg-inline-loader場合）を処理するために使用されるローダーです。

module.exports = {
  entry: './app/index.js',
  module: {
    rules: [
      { test: /\.svg$/, use: 'svg-inline-loader' }
    ]
  }
}

これで、SVGファイルをインポートできます。しかし、CSSファイルはどうですか？使用されるスタイルの場合css-loader。

npm i css-loader -D

module.exports = {
  entry: './app/index.js',
  module: {
    rules: [
      { test: /\.svg$/, use: 'svg-inline-loader' },
      { test: /\.css$/, use: 'css-loader' }
    ]
  }
}

これで、SVGファイルとCSSファイルの両方をインポートできます。ただし、スタイルが正しく機能するためには、別のローダーを追加する必要があります。のおかげで、css-loaderCSSファイルをインポートできます。しかし、それはそれらがDOMに含まれるという意味ではありません。このようなファイルをインポートするだけでなく<style>、DOM要素に適用されるようにタグに配置する必要があります。このために必要style-loaderです。

npm i style-loader -D

module.exports = {
  entry: './app/index.js',
  module: {
    rules: [
      { test: /\.svg$/, use: 'svg-inline-loader' },
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }
    ]
  }
}

CSSファイルの処理には2つのローダーが使用されるため、プロパティ値useは配列であることに注意してください。また、ローダーの順序にも注意してください。最初にstyle-loader、次にcss-loader。大事です。Webpackはそれらを逆の順序で適用します。最初css-loaderにインポート'./styles.css'に使用され、次にstyle-loaderDOMにスタイルを挿入するために使用されます。

ローダーは、ファイルのインポートだけでなく、ファイルの変換にも使用できます。最も人気があるのは、Babelを使用して次世代のJavaScriptを最新のJavaScriptに変換することです。これに使用されますbabel-loader。

npm i babel-loader -D

module.exports = {
  entry: './app/index.js',
  module: {
    rules: [
      { test: /\.svg$/, use: 'svg-inline-loader' },
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
      { test: /\.(js)$/, use: 'babel-loader' }
    ]
  }
}

ほとんどすべてのタイプのファイル用のローダーがあります。

出口点

これで、Webpackはエントリポイントとローダーについて認識します。次のステップは、バンドルのディレクトリを指定することです。これを行うoutputには、Webpack設定にプロパティを追加します。

const path = require('path')

module.exports = {
  entry: './app/index.js',
  module: {
    rules: [
      { test: /\.svg$/, use: 'svg-inline-loader' },
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
      { test: /\.(js)$/, use: 'babel-loader' }
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  }
}

プロセス全体は次のようになります。

Webpackは、次の場所にあるエントリポイントを受け取ります。 ./app/index.js
ステートメントimport / requireを解析し、依存関係グラフを作成します
Webpackは、適切なローダーを使用してコードを変換することにより、バンドルの構築を開始します
彼はバンドルを集めて入れます dist/index_bundle.js

プラグイン

バンドルの生成前または生成中に、ローダーを使用して個々のファイルを処理する方法を見てきました。ローダーとは異なり、プラグインを使用すると、バンドルを作成した後にタスクを実行できます。これらのタスクは、バンドル自体と他のコードの両方に関係する可能性があります。プラグインは、より強力で制限の少ないローダーと考えることができます。

例を見てみましょう。

HtmlWebpackPlugin

Webpackの主なタスクは、で参照できるバンドルを生成することindex.htmlです。バンドルのあるディレクトリに

HtmlWebpackPlugin作成index.htmlし、バンドル内のバンドルへのリンクを自動的に追加します。

バンドルに名前を付けてindex_bundle.js、に入れましたdist。ディレクトリにHtmlWebpackPlugin新しいファイルを作成し、バンドルへのリンクを追加します- 。すごいですね。生成されるため、出口点やバンドル名を変更しても、この情報を受け取り、内容を変更します。このプラグインをどのように使用しますか？いつものように、最初にインストールする必要があります。index.htmldist<script src='index_bundle.js'></script>index.htmlHtmlWebpackPluginHtmlWebpackPluginindex.html

npm i html-webpack-plugin -D

次に、プロパティをWebpack設定に追加しますplugins。

const path = require('path')

module.exports = {
  entry: './app/index.js',
  module: {
    rules: [
      { test: /\.svg$/, use: 'svg-inline-loader' },
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
      { test: /\.(js)$/, use: 'babel-loader' }
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  },
  plugins: []
}

HtmlWebpackPlugin配列にインスタンスを作成しますplugins。


const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './app/index.js',
  module: {
    rules: [
      { test: /\.svg$/, use: 'svg-inline-loader' },
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
      { test: /\.(js)$/, use: 'babel-loader' }
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin()
  ]
}

EnvironmentPlugin

Reactを使用している場合は、アプリケーションをデプロイする前process.env.NODE_ENVに、これを値productionに設定することをお勧めします。これにより、警告などの開発ツールを削除することで、Reactを本番環境に組み込むことができます。webpackを使用すると、プラグインを介してこれを行うことができますEnvironmentPlugin。これはWebpackの一部であるため、インストールする必要はありません。

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')

module.exports = {
  entry: './app/index.js',
  module: {
    rules: [
      { test: /\.svg$/, use: 'svg-inline-loader' },
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
      { test: /\.(js)$/, use: 'babel-loader' }
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin(),
    new webpack.EnvironmentPlugin({
      'NODE_ENV': 'production'
    })
  ]
}

これで、アプリケーションのどこでも、を使用してプロダクションモードを設定できますprocess.env.NODE_ENV。

HtmlWebpackPluginそして、EnvironmentPluginWebPACKのプラグインシステムのほんの一部です。

モード

制作用のアプリケーションを準備するプロセスでは、いくつかの手順を実行する必要があります。そのうちの1つであるprocess.env.NODE_ENVvalueへの設定について説明しましたproduction。もう1つのアクションは、コードを縮小し、コメントを削除してバンドルのサイズを縮小することです。

これらのタスクを解決するための特別なプラグインがありますが、より簡単な方法があります。WebPACKの設定では、設定することができますmodeしdevelopmentたりproduction、開発環境によって異なります。

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './app/index.js',
  module: {
    rules: [
      { test: /\.svg$/, use: 'svg-inline-loader' },
      { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
      { test: /\.(js)$/, use: 'babel-loader' }
    ]
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index_bundle.js'
  },
  plugins: [
    new HtmlWebpackPlugin()
  ],
  mode: 'production'
}

を削除しましたのでご注意くださいEnvironmentPlugin。実際にはmode、値を設定した後、productionWebpackは自動的にprocess.env.NODE_ENV値を割り当てますproduction。これにより、コードが最小化され、警告が削除されます。

Webパックの起動

Webpackの動作と構成方法は現時点ではわかっていますが、実行する必要があります。実行するために作成できる

ファイルがあります。package.jsonscriptwebpack

"scripts": {
  "build": "webpack"
}

これnpm run buildで、ターミナルでコマンドを実行すると、Webpackが起動し、最適化されたバンドルが作成されindex_bundle.js、に配置されdistます。

開発および生産モード

全体として、Webpackは完了です。最後に、モードを切り替える方法を見てみましょう。

生産のために構築するとき、私たちは可能な限りすべてを最適化したいと考えています。開発モードの場合、その逆が当てはまります。

モードを切り替えるには、で2つのスクリプトを作成する必要がありますpackage.json。

npm run buildプロダクションバンドルを構築します。

npm run start開発サーバーを起動し、ファイルの変更を監視します。

覚えているかと思いますが、これはWebpack設定のmode値productionに設定されています。しかし、今は必要ありません。実行するコマンドに応じて、環境変数に適切な値を設定する必要があります。のスクリプトbuildを変更してみましょうpackage.json。

"scripts": {
  "build": "NODE_ENV='production' webpack",
}

Windowsを使用している場合、コマンドは次のようになります"SET NODE_ENV='production' && webpack"。

これで、Webpack設定で、にmode応じて値を変更できますprocess.env.NODE_ENV。

...

  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
}

アプリケーション用の既製のバンドルを作成するにnpm run buildは、ターミナルで実行するだけです。ディレクトリdistファイルが作成されindex.html、index_bunlde.js。

開発サーバー

アプリケーションの開発に関しては、スピードが重要です。Webパックを再起動して、変更のたびに新しいビルドを待つ必要はありません。ここでパッケージが役に立ちwebpack-dev-serverます。

名前が示すように、これは開発用のWebpackサーバーです。ディレクトリを作成する代わりに、distデータをメモリに保存し、ローカルサーバーで処理します。さらに、ライブリブートをサポートします。これは、変更を加えるとwebpack-dev-serverファイルが再構築され、ブラウザが再起動することを意味します。

パッケージをインストールします。

npm i webpack-dev-server -D

あとは、スクリプトstartをに追加するだけですpackage.json。

"scripts": {
  "build": "NODE_ENV='production' webpack",
  "start": "webpack-dev-server"
}

これで、開発サーバーを起動するコマンドと、完成したバンドルをビルドするコマンドの2つのコマンドがあります。

この記事がお役に立てば幸いです。清聴ありがとうございました。

Webpack：ビギナーズガイド