webpackでビルドしてみよう

2022年2月13日2022年4月23日 souki202

早速, Webpackを使ってビルドしていきましょう!

1 構成の準備
2 ビルドする
3 更新時に自動でビルド (watch)
4 まとめ

構成の準備

ファイル位置

まずは、元となるソースが入っている場所と、出力場所を分けましょう。ここでは、src/ディレクトリに元となるファイルを、dist/assets/にはビルド後のファイルが入るようにします。

project/
├ dist/
│ ├ assets/
│ └ index.html
├ node_modules/
│ └ ...
├ src/
│ └ index.js
├ package-lock.json
└ package.json

node_modulesは今後省略します。

ビルドしたjsを読み込むHTMLの準備

次に、ブラウザで動作させるため、HTMLファイルを作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 読み込みはビルド後のファイル -->
    <script src="assets/main.js"></script>

    <title>Document</title>
</head>
<body>
    <div id="app">
        <p>Hello, World!!</p>
    </div>
</body>
</html>

とりあえずブラウザで表示するための前準備は整いました。

ビルドするjsの準備

srcディレクトリ内にindex.jsを作り、適当なコードを書きましょう。

console.log("Hello, World!!");

webpackの軽い設定

次に、ビルドのための設定を書きます。プロジェクトのpackage.jsonと並べてwebpack.config.jsを用意してください。

project/
├ dist/
│ ├ assets/
│ └ index.html
├ src/
│ └ index.js
├ package-lock.json
├ package.json
└ webpack.config.js   <- これ

以下のような設定を作りましょう。

const dist = "/dist/assets/";

module.exports = {
    entry: {
        main: "./src/index.js"
    },
    output: {
        filename: "[name].js",
        path: __dirname + dist,
    }
}

entryはコンパイルするファイルの原点です。ここで指定したファイルを基準として依存関係を解決していきます。C言語だとmain関数があるファイルを指定している感じです。

outputは出力先を指定します。pathはファイル名ではなくディレクトリを指定します。ここで、pathは絶対パスです。__dirnameを付けることで実行中のディレクトリが指定されます。

outputで[name].jsとすることで、entryにある連想配列のキー (main: "..."のmainという名前) がファイル名に利用されます。

entryのデフォルトはmain: "./src/index.js"らしいのですが、明記されていないのでしっかり書くほうが無難です。

しばしばpath.resolve("./src/...")のような書き方を見ますが、それはpathというパッケージを利用しており、相対パスを絶対パスに変換したりできます。npm i pathで導入できます。

ビルドコマンドの設定

Webpackのビルドについて検索すると、しばしば

npm run dev
npm run watch

のようなコマンドが登場します。しかし、設定をしないとこれらは使えません。この設定は、package.jsonに書く必要があります。

{
  // ...

  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "watch": "webpack --mode development --watch --color --progress",
    "watch-poll": "npm run watch -- --watch-options-poll=1000",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

  // ...
}

scriptsにdev、build、watchが増えました。この設定がない場合。

npx webpack --mode development

のような長いコマンドを打つ必要が出てきます。scriptsに書いたものは、npm run コマンド名で実行できるようになります。コマンド名は、scripts内のキーがコマンド名になります。

npxは、npmで導入したパッケージのコマンドを実行するためのものです。webpackを導入すると、npx経由でwebpackというコマンドが使えるようになります。

ビルドする

早速ビルドしましょう!

npm run dev

を実行してください。ここで、webpack-cliを導入していなければ導入するか聞かれるので、yesとしてください。

赤色のエラーっぽいのがなく、./dist/assets/にmain.jsが作成されていたら成功です!

早速ブラウザで開いて動作しているか確認してみましょう。

これで完了です!

更新時に自動でビルド (watch)

これまでの設定でビルドはできるようになりました。しかし、ちょっと更新するたびにビルドを手動で走らせるのは面倒です。そこで、自動でビルドされるようにします。

{
  // ...
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",

    // この2行
    "watch": "webpack --mode development --watch --color --progress",
    "watch-poll": "npm run watch -- --watch-options-poll=1000",

    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

dev等と同様に、npm run watchを実行します。