Webpackを理解する勉強の仕方

Webpackとは

WebpackとはWebサイトのモジュールバンドラーです。モジュールバンドラーとは、エントリポイントに始まるモジュールの依存関係を辿って、必要なモジュールを1つのファイルにまとめてくれるものです。

Webpackは、さまざまなプラグインを組み合わせて利用することができ、非常に自由度が高いツールです。プラグインを使うことで単にモジュールをバンドルするだけでなく、ソースコードの圧縮や、難読化を行ったり、TypeScriptやES6で書かれたソースをトランスパイルすることができます。

Webの開発を行うためのツールとして、海外ではデファクトスタンダードの地位を確立しています。既にWeb開発では、必須のツールになっていると思います。

Webpackは自由度が高く、機能が多いため、2,3時間程度できちんと学ぶことは難しいです。品質の良いコンテンツで効率的に理解すれば、時間の節約になるでしょう。この記事ではWebpackを理解する上で、「これを見ればOK」と思えるオススメの動画、サイトをご紹介します。

動画で理解

WHAT IS WEBPACK, HOW DOES IT WORK? | Webpack 2 Basics Tutorial

英語ですが、とてもわかり易い英語を話しているので、たいていの人は問題なく理解できると思います。素晴らしいところは、Webpackの表面的な使い方だけではなく、どのように動作しているのかという仕組みまで含めて解説しているところです。

チュートリアルで理解

Webpack Document

Webpackの公式チュートリアルです。どうやら日本語版は無さそうですが、そんなに文字は多くないので大丈夫です。大変わかりやすくステップバイステップで解説されているので、Webpackの基本はこれを隅々まで読めば、十分だと思います。

テンプレートで理解

下のコマンドでVueのWebpackテンプレートを作成できます。作成されたテンプレートのbuild/ディレクトリにあるwebpack.configファイルを読んでみましょう。Webpackの多くの機能の便利さを理解するのに役立つはずです。

$ npm i vue vue-cli -g
$ vue init webpack vue-webpack # プロンプトはEnter連打でOK

ハマリポイント

import(ES6), require(CommonJS)の使い分け

import、requireの使い分けは混乱しがちです。わからなくなったらこのサイトを見てみましょう。

[es6] import, export, default cheatsheet

npmモジュールの使い方がわからない

例えばbootstrapを使いたいと思ったら下のようにインストールします。

$ npm install bootstrap --save

ここで混乱しがちなのは、インストールされたnodeモジュールをどのようにソースコードにインポートしたらよいかということです。

node_module/bootstrapのフォルダを見ると、このようになっています。

$ ls node_modules/bootstrap/
LICENSE     README.md   dist        js      package.json    scss

package.jsonの中身をみてみましょう。

$ vim node_modules/bootstrap/package.json
...省略
"main": "dist/js/bootstrap",<br />
...省略

mainはnpmモジュールのエントリポイントです。
dist/ディレクトリのbootstrapですね。

webpackと同じように、大抵はdist(distribution)フォルダの下に配布対象のブツが入っています。

$ tree node_modules/bootstrap/dist
dist
├── css
│   ├── bootstrap-grid.css
│   ├── bootstrap-grid.css.map
│   ├── bootstrap-grid.min.css
│   ├── bootstrap-grid.min.css.map
│   ├── bootstrap-reboot.css
│   ├── bootstrap-reboot.css.map
│   ├── bootstrap-reboot.min.css
│   ├── bootstrap-reboot.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   └── bootstrap.min.css.map
└── js
    ├── bootstrap.bundle.js
    ├── bootstrap.bundle.js.map
    ├── bootstrap.bundle.min.js
    ├── bootstrap.bundle.min.js.map
    ├── bootstrap.js
    ├── bootstrap.js.map
    ├── bootstrap.min.js
    └── bootstrap.min.js.map

distのフォルダの中に、圧縮されたJSファイルやCSSファイルがありますね。
これを次のようにsrc/配下のJSでインポートすればbootstrapが利用できます。

import 'bootstrap'; // jsのインポート
import 'bootstrap/dist/css/bootstrap.min.css'; // cssのインポート

エントリポイント以外のファイルはdist/css/bootstrap.min.cssのようにモジュールのルートディレクトリからの相対パスで指定しなければいけません。これが、初心者が混乱しやすいところです。

なお、cssをsrc/配下のjsでインポートする場合は、style-loader, css-loaderがwebpackのconfigに設定されていることを確認してください。

bootstrapの場合は、このページがわかりやすいでしょう。

bootstrap getting-started

注意点

WebpackはSPA(Single Page Application)を開発するのに向いたフレームワークです。独立したHTMLファイルが多数あるようなサイトは向いていません。たとえば、Vueや、React等のテンプレート機能のあるフレームワークを用いて画面を開発し、HTMLファイル自体はシンプルかつ最小限に留めて開発しましょう。また、それがモダンなWeb開発としても望ましいです。

まとめ

Webpackは現代的なWebフロントエンドの開発を行うにあたり、Webエンジニアにとって必須のツールです。実際、使ってみると大変便利なツールで、なくてはならないものだと思います。

残念なのは、日本語ではあまり良いドキュメントが見当たらなかったことです。英語で勉強したほうが効率的にWebpackを理解できると思います。

Please follow and like us:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です