初めてのWebpack – インストールと使用方法

Webpackを僕の言葉で簡潔に説明すると、パッケージ内で使用するリソースファイルをトランスパイル処理などを施しながら一括して処理し、１つのJavaScriptファイルに纏めてしまうことが出来るツールです。ざっくりとした解説だとは思いますが。

ただ、Webpackの前に「Node.js」と「npm」を使用するので、これらのキーワードがピンと来ない方は「初めてのNode.jsとnpm – インストールと使用方法」を先にご拝読ください。簡単に使用方法を紹介しています。

ワードプレスでもテーマで使用されるJavaScriptだけでなく、新しいエディタ「Gutenberg」のカスタマイズでもReactが使用されており、JSXをとランスパイルするなどの機会も増えてくるでしょう。

また、Webpackには使用するプラグインが数多く存在し、トランスパイル（Babelのような変換）するためのローダー系ツールやファイルを圧縮したり、console.logのようなコードを取り除くオプションを実用ファイルに付けることも出来ますよ。

インストール

「Node.js」と「npm」がインストールされていることを確認した上で、パッケージにおけるnpm初期化を済ませておきましょう。

インストールするコマンドは以下のとおりです。

// グローバルにインストールする場合
npm install -g webpack webpack-cli

// ローカルにインストールする場合（コマンド時は「npx webpack」を使用）
npm install --save-dev webpack webpack-cli

インストールが完了すれば、コマンドラインツールも使用できます。

念の為

webpack -v
webpack-cli -v

でバージョンの確認をして、インストールが出来ていることを確認しておいてください。ローカルにインストールした場合は、コマンドの前にnpxを付けましょう。

ちなみにこの記事を書いている時点でのバージョンはWebpackのバージョンは4です。

では、確認が出来ましたら次に進みましょう。

セットアップ

Webpackを使用するには、パッケージに合った設定ファイルを作成する必要があります。

ターミナルでコマンドを入力した際に読まれるのですが、オプションで設定ファイル名を指定することも出来ますが、標準で指定されているのが「webpack.config.js」という名前のファイルですので、この名前でファイルを作成し、JavaScriptでコードを書いていきます。

具体的にどんなことを書くかというと、

• 纏めるファイル
• 出力するファイル
• モジュール
• プラグイン
• その他の設定

と、プラグインによるオプションも含めると、非常に多くのオプションを付け加えることが出来ます。

コマンドの例を挙げてみます。

// デフォルトの設定ファイル「webpack.config.js」を適用する場合
webpack 

// 「prod.config.js」を設定ファイルとして適用する場合　（「--config」というフラグを用います）
webpack --config prod.config.js

// オプションとして値を渡す場合（下の例では{key: val}のように渡しています。）
webpack --env.key=val

// 該当の関連ファイル編集・保存時に自動で処理
webpack --watch

といった使い方ができます。

では、まずはシンプルな設定を書いてみましょう。

設定ファイル「webpack.config.js」の書き方

パッケージのルートに「webpack.config.js」という名前でファイルを作成しましょう。

基本的には以下のようにCommonJSで設定データのオブジェクト、あるいはその配列を「module.exports」でモジュール化する形にします。

// "npm install --save-dev path"でインストール
const path    = require( 'path' );
const webpack = require( 'webpack' );


const configA = {

  // "development" もしくは "production"
  mode: "development", 

  // 入力設定
  entry: {
    "a": [
      "./your-entry1-a.js"
    ],
    "js/b": [
      "./your-entry2-a.js"
    ],
  },

  // 出力設定
  output: {
    filename: "[name].js", // [name]は 「a」 「js/b」
    path: path.join(__dirname, '/assets/js'),
    pathinfo: true
  },

  // ローダーなどの設定
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: [
          /node_modules/,
        ],
        use: [
          {
            loader: "babel-loader"
          }
        ]
      }
    ]
  }
};

const configB = {
  設定B...
};

module.exports = [ configA, configB ];

また、このファイルはコマンドによりWebpackの処理が行われる際に読まれ、関数を用意しておくことで、コマンドからの入力データを受け取ることも出来ます。（コマンドは前の見出しに書いた例の３つ目をご参照ください）

module.exports = ( env ) => {

  // 
  console.log( env );

  return [ configA, configB ];

}

前の見出しで書いたコマンドの例を適用すると「env」のキー「key」に値「val」がセットされたオブジェクトを受け取ります。

また、設定が１つの場合は、配列にせずその設定オブジェクトだけで大丈夫です。

オブジェクトにはそれぞれの項目毎に、キーを指定して設定していきます。

Webpackの設定は冒頭にも書いたようにオプションが豊富なので、詳細は「Webpack Config」をご参照ください。必要な設定箇所をピックアップして探さないと迷うかもしれません。

まとめて書くとどうしても長くなりますし、環境毎に細かく処理内容を分けたい場合もあると思いますので、下のように各設定を変数でセットして最後に返すモジュールをセットすると便利かもしれません。

module.exports = ( env ) => {

var _mode = "development";
if ( "production" === env.mode ) {
  _mode = "production";
  _devtool = '';
}

var _entry = {
  "a": [
    "./your-entry1-a.js"
  ],
  "some-dir/b": [
    "./your-entry2-a.js"
  ],
};

var _output = {
  filename: "[name].js",
  path: path.join(__dirname, '/assets/js'),
  pathinfo: true
};

if ( "production" === env.mode ) {
  output.filename = "[name].min.js";
  output.pathinfo = false;
}

var _module = {
  ローダーなどの設定
};

var config = {
  mode: _mode,
  entry: _entry,
  output: _output,
  module: _module
};

return config;

}

このように設定ファイルも自分でカスタマイズ出来ますので、実際に使う時に環境に合わせて色々試してみてください。

mode: ロードされる環境

この値は開発環境を指定する「development」と実用環境を指定する「production」の二者択一です。

コマンドにより条件を渡すことが出来ますので、それを反映させることも出来ますから、条件次第で指定する値を決めてください。

ただ、今回はテストですので「development」にしておいて大丈夫です。

開発環境では「development」、最後に実用環境用に生成する際は「production」にしましょう。

entry: 纏めたいファイル

ロードされるファイルのエントリーポイントとなるファイルを配列で指定できます。オブジェクトのキーは「entry」です。

例でも書いてあるように「entry」の設定オブジェクトの各キーは、次の出力設定におけるファイル名に使用することが出来ます。

実用するファイルを分割したい場合など、各キー毎にエントリーポイントとなるファイルを指定します。

例には書くエントリーに配列で複数のエントリーファイルを指定できますが、もちろんエントリーファイルから「require」で各モジュールを読むことは出来ます。

また、Webpackの特徴として、次のmoduleの項目で書くローダーを指定することで、SASSやTypeScriptなどもまとめてロードさせることが出来ます。

{
  "a": [
    "./your-entry1-a.js",
    "./maybe-you-want-to-load.css"
  ],
  "some-dir/b": [
    "./your-entry2-a.js"
  ],
}

entryに設定するオブジェクトはこんな感じで、JavaScript内にrequireでロードさせても大丈夫ですが、ここに直接書いてもちゃんと読まれます。

output: 出力時の名前

エントリーポイントからロードされたファイルを纏めて後に生成されるファイルを指定するオプションです。

{
   filename: "[name].js",
   path: path.join(__dirname, '/js'),
   pathinfo: true
 };

キー「filename」では、[name]を前の見出しで紹介した「entry」のキーを受け取る事ができますので、複数のファイルを出力する設定をしている場合は利用しておきましょう。スラッシュでフォルダを指定する事もできます。

キー「path」はファイルが出力される位置のベースとなるフォルダを指定します。

このoutput例を、前の項目の「entry」の例と併せて使用した場合、

• ./js/a.js
• ./js/some-dir/b.js

のような形で出力されます。

また実用環境用の条件を指定する場合が多いので、.min.jsという名前に分けたい場合はこのようにしておき、同じような条件を設けてプラグインの設定を使って圧縮設定などを行います。

if ( "production" === env.mode ) {
  output.filename = "[name].min.js";
  output.pathinfo = false;
  
  その他の圧縮設定など
}

module：ローダーの指定

対応したローダーさえあれば、大抵のファイルはWebpackで纏めることが出来ますので「Loaders | webpack」でも必要に応じて探してみてください。

そして、ローダーもまたnpmでインストールしますから手間は掛かりません。

今回の上の例では、標準的なCSSとJSファイルがロードされている前提とします。ロード時にファイルのコードが纏められていることを確認できるように、何か分かりやすいコード（「console.log(‘testing webpack now …’);」など）を書いておいてくださいね。

では、ファイルをロードするルールを指定します。

// JSファイルを対象に
const jsRule = {

  // キー「test」で正規表現でローダーを適用するファイル名を指定
  test: /\.js$/,
  
  // 除外対象の指定
  exclude: [
    /node_modules/,
  ],
  
  // 使用するローダー
  use: [
    { loader: "script-loader" }
  ]
};

const cssRule = {
  test: /\.css$/,
  exclude: /(node_modules|bower_components|vendor)/,
  use: [
    { loader: "style-loader" },
    { loader: "css-loader" },
  ]
};

// これを設定オブジェクトのキー「module」に設定します。
const _module = {
    rules: [
        scriptRule,
        cssRule
    ]
}

今回前提条件として標準的なファイルを想定していますので、使用するローダーはこれで問題ないでしょうが、実際はファイルの数も増えてきますので、JavaScriptやTypeScriptも含めてあらゆる構文に対して有効なオプションをプラグインにより兼ね備える「babel-loader」がよく使われます。また、CSSのローダーにも実際は「SASS」が使われるでしょうから「sass-loader」が使われます。ただ、今回のテストでは気にしないでいきましょう。

あと、使用するローダーを忘れずインストールしておきましょう。

npm install --save-dev script-loader css-loader style-loader

Webpackでテスト

恐らくこれで必要最低限の設定は揃ったと思いますので、ターミナルにコマンドを打ってみましょう。

エラーが起これば、なんか吐き出すでしょう。

webpack

でとりあえず「webpack.config.js」をそのまま読ませてみましょう。環境を条件に組み込んでいる場合は、オプションで「–env.key=val」をセットするか、設定ファイル内でのデフォルト値をセットするのを忘れないようにしましょう。

コマンドの後にファイルが生成されていることを確認できましたら、ブラウザなどでロードして、エントリーポイントから読まれるファイルに書いたコードがちゃんと読まれていることを確認してください。

console.log('this is file a ~~~~~~');

のように書いておくと分かりやすいです。

まとめ

JavaScriptやTypeScript、Reactなどのトランスパイルが必要なコードを書くことはほぼ避けられないと思いますので、今回は「script-loader」を指定しましたが、実際には「babel-loader」を使うことを想定しておきましょう。

この他、ファイルを圧縮したり、コメントを外したり、console.logを外したり、と便利な機能が揃っていますから、その内紹介していきます。

まずはファイルを纏め、トランスパイル（変換）なども含めて、使い慣れるようにしていきましょう。