Webpackとは

リンクから来た人は繰り返しになる部分があるので、飛ばしてくださいmm

最近、フロントエンドの周りではよくWebpackについて耳にすることが多くなりました。

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

Webpackは、モジュールバンドラーと呼ばれるもので、コードを複数のファイルに分割して管理することができます。NodeJSの世界では、reuqireimportという構文を使って別ファイルの内容を使ったりということは既にできていますが、ブラウザの世界に話を変えると、そのままでは対応はまだまだなのが現実です。ブラウザの世界でもそういった構文を使ってJavascriptなどを書くことができるようにするツールがWebpackです。

ただWebpackには若干ややこしい設定があり、困惑する部分もあります。自分の理解も兼ねて一度まとめてみようと思います。

まずは、使ってみましょう

準備

まずは、適当に作業ディレクトリを作ります。

mkdir test && cd $_

次にWebpackをインストールします。

npm init -y && npm i -D webpack@beta

webpack.config.jsを作る

webpack.config.jsという設定ファイルをプロジェクトルートに作ります。以下はインプットとアウトプットの設定を書いた、最小のものですがこれだけでも動作させる事ができます。

module.exports = {
  // 基準となるファイル
  entry: './app/index.js',

  // アウトプット用のPath
  output: {
    filename: 'bundle.js',
    // ディレクトリへの絶対Path
    path: '${__dirname}/dist'
  }
};

適当にJavascriptファイルを用意

いくつか実際に.jsファイルも作ってみましょう。1つ目は上記の設定のentryになっているapp/index.jsファイル、2つ目に、それから読み込むapp/log.jsを作ります。

app/log.js

まずはlog.jsから。確認だけなので、コンソールにログを出すだけの関数をmodule.exportsします。

module.exports = text => console.log(text);

app/index.js

次に、index.jsからlog.jsを読み込んで上記の関数を実行するような処理を書いてみます。

const log = require('./log');

log('Hello Webpack!');

Webpackコマンドでビルドする

さて、準備はできたので後はビルドして1つのファイルにするのみです。

webpack

distディレクトリにbudnle.jsというファイルができていればちゃんと出来ています!

ブラウザで確認する

HTMLをアウトプットディレクトリに作成してもいいんですが、ここではjantimon/html-webpack-pluginというプラグインを使ってHTMLを作成したいと思います。

npm i -D html-webpack-plugin

インストールが済んだら、webpack.config.jsにその設定を追加します。

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

module.exports = {
  entry: './app/index.js',
  output: {
    filename: 'bundle.js',
    path: '${__dirname}/dist'
  },
  plugins: [new HtmlWebpackPlugin()]
};

編集が終わったら再度ビルドします。

webpack

distディレクトリに今度はindex.htmlがあれば大丈夫。ブラウザでindex.htmlを開いて開発ツールのコンソールにHello Webpack!と表示されたか確認してください。

Read more