webpack 入門

2019/04/15,

webpack の概要について説明します

webpack とは

webpack は現代的な JavaScript アプリケーションの静的モジュールバンドラーです。 複数のモジュールからなる JavaScript アプリケーションを一つにまとめます。 ( バンドル - bundle )

webpack はどのような動作をするのか サンプルコード

以下のような 2 つの JS ファイルがあるとします。index.jsbar.jsに依存しています。配布するときは一つのファイルにまとめてしまえば、配布しやすいです。

// src/index.js
import bar from "./bar";
bar();
// src/bar.js
export default function bar() {
  //
}

以下のような webpack の設定ファイルを用意します。(必ずしも必要ではないです) entry ポイント(プログラムの最初に呼び出すファイル)を指定し、./dist/bundle.js に生成結果を出力する設定をしています。

const path = require("path");

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

生成した JS ファイルを読み込む HTML ファイルを用意します。

src/index.html

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
    <script src="../dist/bundle.js"></script>
  </body>
</html>

設定ファイルが用意できたら、webpack をコマンドラインで実行することで、bundle.jsが生成されます。

webpack のコンセプト

webpack は現代的な JavaScript アプリケーションの静的モジュールバンドラーです。

webpack を利用するにあたってコアとなるコンセプトを理解しておくといいでしょう。

  • Entry
  • Output
  • Loaders
  • Plugins
  • Mode
  • Browser Compatibility

Entry

エントリーポイント(entry point) は内部依存関係グラフの関係を開始するために webpack がどのモジュールを使用すべきかを示します。webpack はどのモジュールやライブラリがそのエントリポイントに依存しているかを把握します。

デフォルト設定では ./src/index.js になっています。ですが、別のファイルを指定したり、複数のエントリーポイントを指定できます。

webpack.config.js

module.exports = {
  entry: "./path/to/my/entry/file.js"
};

Output

output プロパティは webpack の生成物の配置先を指定できます。

デフォルト設定では.dist/main.jsになっています。設定ファイルでoutput先を指定できます。

webpack.config.js

const path = require("path");

module.exports = {
  entry: "./path/to/my/entry/file.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "my-first-webpack.bundle.js"
  }
};

ファイルの先頭でimportしているpathモジュールは Node.js のファイルパスを操作するためのコアモジュールです。

Loader

初期設定の webpack では JavaScript と JSON ファイルのみを理解します。Loader を指定することで、他のファイルをモジュールとして追加することが可能になります。

loaders は二つのプロパティを持ちます。

  1. test プロパティはどのファイルを変換すべきかを指定します
  2. use プロパティはどのように変換するかを指定します。

webpack.config.js

const path = require("path");

module.exports = {
  output: {
    filename: "my-first-webpack.bundle.js"
  },
  module: {
    rules: [{ test: /\.txt$/, use: "raw-loader" }]
  }
};

上記のように指定すると、webpack は ‘.txt’拡張子のファイルがモジュールとして import もしくは require() されているときは、 raw-loader で変換処理をされたのちバンドルされます。

::: warning

正規表現で拡張子を指定する時、引用符(”,"") で囲まないように注意してください。

:::

Plugins

loader は特定の拡張子のファイルを変換するのに用いられます. plugin はバンドルの最適化、環境変数の設定などより広範囲のタスクを行います。

プラグインを使用するには、require() で読み込んだあと、plugins の配列に追記します。多くのプラグインはオプションでカスタマイズが可能です。

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin"); //installed via npm
const webpack = require("webpack"); //to access built-in plugins

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: "raw-loader" }]
  },
  plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })]
};

例では html-webpack-plugin を利用しています。html-webpack-plugin は バンドル結果を付記した HTML ファイルを生成します。

Mode

development , production , none のモードを指定できます。webpack はモードによって環境に適した最適化を行います。デフォルト値は production です。

module.exports = {
  mode: "production"
};

Browser Compatibility

webpack は ES5 準拠の全てのブラウザをサポートしています。

まとめ

webpack の概要についてでした。

こちらのほうに webpack の環境構築について書いてあります。

webpack 環境構築 - 導入手順

ライセンス

この記事は https://webpack.js.org/ を参考に作成されました。一部翻訳、引用を用いています。


Ouvill(おーびる)

この記事は Ouvill(おーびる) が書きました。サイト作成や、ウェブアプリケーション開発、IT 関連の記事執筆のご依頼を賜っております。

ご要件がある方はコンタクトフォームからご連絡ください。

@Ouvill

最新記事