エンタープライズアプリケーション向けのデータグリッドとチャート
webpack
webpackとのパートナーシップを誇りに思います

はじめに

WebpackはJavaScriptモジュールのコンパイルに使用されます。インストール後、WebpackはCLIまたはAPIから操作できます。Webpackをまだ使用したことがない場合は、コア概念とこの比較を読んで、他のツールよりもWebpackを使用する理由を理解してください。

基本設定

まず、ディレクトリを作成し、npmを初期化し、webpackをローカルにインストールし、webpack-cli（コマンドラインでwebpackを実行するために使用するツール）をインストールします。

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

ガイド全体を通して、diffブロックを使用して、ディレクトリ、ファイル、コードに加えた変更を示します。例えば

+ this is a new line you shall copy into your code
- and this is a line to be removed from your code
  and this is a line not to touch.

次に、次のディレクトリ構造、ファイル、およびその内容を作成します。

プロジェクト

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- index.html
+ |- /src
+   |- index.js

src/index.js

function component() {
  const element = document.createElement('div');

  // Lodash, currently included via a script, is required for this line to work
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');

  return element;
}

document.body.appendChild(component());

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.17.20"></script>
  </head>
  <body>
    <script src="./src/index.js"></script>
  </body>
</html>

また、パッケージをprivateとしてマークし、mainエントリを削除するために、package.jsonファイルを調整する必要があります。これは、コードの誤った公開を防ぐためです。

package.json

 {
   "name": "webpack-demo",
   "version": "1.0.0",
   "description": "",
-  "main": "index.js",
+  "private": true,
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
   "author": "",
   "license": "MIT",
   "devDependencies": {
     "webpack": "^5.38.1",
     "webpack-cli": "^4.7.2"
   }
 }

この例では、<script>タグ間に暗黙的な依存関係があります。index.jsファイルは、実行前にページにlodashが含まれていることに依存しています。これは、index.jsがlodashの必要性を明示的に宣言していないためです。グローバル変数_が存在すると想定しています。

この方法でJavaScriptプロジェクトを管理することには問題があります。

  • スクリプトが外部ライブラリに依存していることがすぐにわかりません。
  • 依存関係が不足している場合、または間違った順序で含まれている場合、アプリケーションは正常に機能しません。
  • 依存関係が含まれているが使用されていない場合、ブラウザは不要なコードをダウンロードする必要があります。

代わりに、Webpackを使用してこれらのスクリプトを管理しましょう。

バンドルの作成

まず、ディレクトリ構造を少し調整して、「ソース」コード（./src）と「配布」コード（./dist）を分離します。「ソース」コードは、記述して編集するコードです。「配布」コードは、最終的にブラウザに読み込まれる、最小化および最適化されたビルドプロセスの出力です。ディレクトリ構造を次のように調整します。

プロジェクト

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- /dist
+   |- index.html
- |- index.html
  |- /src
    |- index.js

index.jsにlodash依存関係をバンドルするには、ローカルにライブラリをインストールする必要があります。

npm install --save lodash

では、スクリプトにlodashをインポートしましょう。

src/index.js

+import _ from 'lodash';
+
 function component() {
   const element = document.createElement('div');

-  // Lodash, currently included via a script, is required for this line to work
+  // Lodash, now imported by this script
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');

   return element;
 }

 document.body.appendChild(component());

スクリプトをバンドルするため、index.htmlファイルを更新する必要があります。lodashの<script>タグは削除し（現在はimportを使用するため）、もう一方の<script>タグを修正して、生の./srcファイルではなく、バンドルされたファイルを読み込むようにします。

dist/index.html

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
     <title>Getting Started</title>
-    <script src="https://unpkg.com/lodash@4.17.20"></script>
   </head>
   <body>
-    <script src="./src/index.js"></script>
+    <script src="main.js"></script>
   </body>
 </html>

この設定では、index.jsは明示的にlodashの存在を要求し、それを_としてバインドします（グローバルスコープの汚染はありません）。モジュールに必要な依存関係を指定することで、Webpackは依存関係グラフを作成できます。そして、そのグラフを使用して、スクリプトが正しい順序で実行される最適化されたバンドルを生成します。

そこで、npx webpackを実行します。これはsrc/index.jsにあるスクリプトをエントリポイントとして扱い、出力としてdist/main.jsを生成します。Node 8.2/npm 5.2.0以降に付属しているnpxコマンドは、最初にインストールしたWebpackパッケージのWebpackバイナリ（./node_modules/.bin/webpack）を実行します。

$ npx webpack
[webpack-cli] Compilation finished
asset main.js 69.3 KiB [emitted] [minimized] (name: main) 1 related asset
runtime modules 1000 bytes 5 modules
cacheable modules 530 KiB
  ./src/index.js 257 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 1851 ms

distディレクトリからブラウザでindex.htmlを開き、すべてが正しく動作していれば、次のテキストが表示されます。「'Hello webpack'」。

モジュール

import文とexport文はES2015で標準化されました。現在、ほとんどのブラウザでサポートされていますが、新しい構文を認識しないブラウザもあります。しかし、心配はいりません。Webpackはそれらを標準でサポートしています。

裏側では、Webpackは実際にはコードを「トランスパイル」して、古いブラウザでも実行できるようにしています。dist/main.jsを調べると、Webpackがどのようにこれを行うかを確認できます。非常に巧妙です！importとexportに加えて、Webpackはさまざまな他のモジュール構文もサポートしています。詳細については、モジュールAPIを参照してください。

Webpackは、importとexport文以外のコードは変更しません。他のES2015機能を使用している場合は、Webpackのローダーシステムを介してBabelなどのトランスパイラを使用してください。

設定の使用

バージョン4以降、Webpackは設定を必要としませんが、ほとんどのプロジェクトではより複雑な設定が必要になります。そのため、Webpackは設定ファイルをサポートしています。これは、ターミナルで多くのコマンドを手動で入力するよりもはるかに効率的です。そこで、設定ファイルを作成しましょう。

プロジェクト

  webpack-demo
  |- package.json
  |- package-lock.json
+ |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

では、新しい設定ファイルを使用してビルドを再度実行しましょう。

$ npx webpack --config webpack.config.js
[webpack-cli] Compilation finished
asset main.js 69.3 KiB [compared for emit] [minimized] (name: main) 1 related asset
runtime modules 1000 bytes 5 modules
cacheable modules 530 KiB
  ./src/index.js 257 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 1934 ms

設定ファイルは、CLIの使用よりもはるかに柔軟性があります。ローダールール、プラグイン、解決オプション、その他多くの機能強化を指定できます。詳細については、設定ドキュメントを参照してください。

NPMスクリプト

CLIからWebpackのローカルコピーを実行するのは特に楽しい作業ではないため、ちょっとしたショートカットを設定できます。npmスクリプトを追加して、package.jsonを調整しましょう。

package.json

 {
   "name": "webpack-demo",
   "version": "1.0.0",
   "description": "",
   "private": true,
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "webpack"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
     "webpack": "^5.4.0",
     "webpack-cli": "^4.2.0"
   },
   "dependencies": {
     "lodash": "^4.17.20"
   }
 }

これで、以前使用したnpxコマンドの代わりにnpm run buildコマンドを使用できます。scripts内では、npxと同様に、ローカルにインストールされたnpmパッケージを名前で参照できます。この慣例は、ほとんどのnpmベースのプロジェクトで標準となっています。これは、すべての貢献者が同じ共通スクリプトセットを使用できるためです。

次のコマンドを実行して、スクリプトのエイリアスが機能するかどうかを確認してください。

$ npm run build

...

[webpack-cli] Compilation finished
asset main.js 69.3 KiB [compared for emit] [minimized] (name: main) 1 related asset
runtime modules 1000 bytes 5 modules
cacheable modules 530 KiB
  ./src/index.js 257 bytes [built] [code generated]
  ./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 1940 ms

結論

基本的なビルドが完了したので、次のガイドアセット管理に進み、画像やフォントなどのアセットをWebpackで管理する方法を学びましょう。この時点で、プロジェクトは次のようになります。

プロジェクト

webpack-demo
|- package.json
|- package-lock.json
|- webpack.config.js
|- /dist
  |- main.js
  |- index.html
|- /src
  |- index.js
|- /node_modules

Webpackの設計について詳しく知りたい場合は、基本概念と設定のページを確認できます。さらに、APIセクションでは、Webpackが提供するさまざまなインターフェースについて詳しく説明しています。

このページを編集·このページを印刷
« 前へ
ガイド
次へ »
アセット管理

24 貢献者

bebrawcntanglijunchrisVillanuevajohnstewsimon04aaronangTheDutchCodersudarsangpVanguard90chenxsanEugeneHlushkoATGardnerayvarotbjarkiztomaszeSpiral90210byzykwizardofhogwartsmyshovanshumanvd3lmsnitin315Etheryen