KDE BLOG

Webデザインやコーディングについて書いています

トップ > webpack > 【webpack速習】vol.1: 概要 ＆ Getting Started

【webpack速習】vol.1: 概要 ＆ Getting Started

webpack

個人ではなんとなくコピペで使っていたwebpack。
会社業務で使っている webpack のビルドを早くしたいのだけれど、ちゃんと webpack について理解しておらず設定ファイルをうまくいじれないのが悔しいので、ちゃんと1から学ぼうと思います。
volいくつまで続くかわかりませんが、ひとまず今回は、webpackの概要と、実際に動かしてみるところまで。

基本的なスタンスとしては、参考情報はwebpackの公式ドキュメントをベースにしつつ、その他随時ググった記事を頼りにしていきたいと思います。
うまくまとめるというよりはログを残す感じになるので雑な内容になるかもしれませんのであしからず。

webpackとは何か

  • 複数のJavaScriptファイルをまとめるモジュールバンドラ（これが本質）
  • JavaScriptモジュールの依存関係を解決して、静的ファイルを出力する
    • モジュールの呼び出し順などを自動で解決
  • webpack.config.js に設定を書き、コマンドラインで実行
  • 実行には node.js が必要
  • ローダーやプラグインといった機能で、ファイルをバンドル時にカスタムタスクを実行できる

webpackの本質

  • ES Modules のエミュレート
  • node_modules のリンカ
  • 拡張子ごとの変形

それ以外は基本おまけと考える

webpackと似たもの

  • gulp
  • grunt
  • npm script
  • parsel
  • etc...

gulp はJSや画像の圧縮、sassのコンパイルなどのタスクを自動で実行するタスクランナー。
webpack はあくまで JavaScript ファイルのモジュールバンドラ。

webpackの基本要素

  • Entry（エントリー）
    • JavaScriptファイルをバンドルする上で、どのファイルを基準として依存関係を解決するかを指定
    • 複数のエントリーを指定可能
  • Output（アウトプット）
    • バンドルしたファイルを、「どこ」に「どのような名前」で出力するかを指定
  • Loader（ローダー）
    • webpack 自体はJavaScriptしか理解できないが、ローダーを使用することでcssやhtmlなどのファイルをモジュールに変換して処理を行える
    • webpack.config.js には 「ファイル名」と「適用する処理内容」を記述
  • Plugin（プラグイン）

実際に動かす

Getting Started | webpack をやってみての要点です。

  • まずは適当なディレクトリを作って、npm 初期化を行い、webpack と webpack をコマンドラインで実行できるようにするために webpack-cli をインストールする。 （yarn で行っています）
mkdir webpack4
cd webpack4
yarn init -y
yarn add webpack webpack-cli --dev
  • 誤ってnpmで公開されないように package.json に "private": true, を追加する。

"private": true の意味

If you set "private": true in your package.json, then npm will refuse to publish it.

This is a way to prevent accidental publication of private repositories. （以下略）

package.jsonで "private"をtrueに設定した場合、npmはそれを公開することを拒否します。

これは、プライベートリポジトリが誤って公開されるのを防ぐための方法です。

（npm-package.json | npm Documentation より）

基本的にクローズなプロジェクトであれば "private": true, にしておいた方がよい。

  • src(source) フォルダ と dist(distribution) フォルダで分ける

npm install --save ? npm install --save-dev ?

  • 本番公開用のJavaScriptにバンドルされるパッケージをインストールするときは、npm install --save を使用

  • 開発目的でパッケージをインストールする場合（例えばlinter、テストライブラリなど）、npm install --save-dev を使用

  • import ... from ...; のように書くことで、モジュールがどんな依存関係があるかわかり、webpack はその情報を使って依存関係グラフを作る。
    そのグラフを使って、正しい順番で実行される最適化されたバンドルを生成する

  • import文、 export文 は es2015からの記法のため通常はそのまま使えないが、webpackはそのままサポートしている

    • 詳しくは Module Methods | webpack
    • webpackは import文、 export文 以外のes2015以降のコードは基本変換しない。使用する場合は、Babel などのトランスパイラーをLoader を介して使用する

config ファイルを作成

webpack4 では設定ファイルは使わずにwebpackを実行することはできるが、プロジェクトとして使う場合大抵は設定ファイルを書く必要がある。

▼ webpack.config.js

const path = require('path');

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

実行コマンド

yarn webpack --config webpack.config.js

※yarn webpack を実行したときに webpack.config.js がある場合、デフォルトでその設定で実行される。

参考