フロントエンジニア入門 webpack-dev-server を使って便利な開発環境を作る

2021年2月14日

この記事の対象者

ある程度HTMLやJavaScriptについては学習できたが、実際の現場でどのような開発環境が使われているのか知らない、より実践的な開発を知ってスキルアップしたい、という方におすすめです。

webpack や webpack-dev-server は現在の実務ではほぼ必須の技術になっています。

webpack の設定を自分でやったことがある・環境を作ったことがある、というのは採用されるときの大きなポイントになると思っています。(モダンな開発にどれだけなれているかの指標になる)

巷の動画学習ではこれらのことにあまり触れられていないように思ったので、一連の手順を記載してみました。

前提

  • HTMLとJavaScriptがある程度分かる
  • Node.jsをインストールすることができ、npm がなんとなく分かる

ゴール

  • webpack-dev-server を使って、コードを変更すると自動でブラウザが再リロードされて、変更後の画面が表示される仕組みをつくる
  • webpack を使って、複数のjsファイルを一つにまとめてみる

手順

最終的なディレクトリ構造

.
├── dist
│   ├── bundle.js <<< これは最後のステップ完了後に作成されます
│   └── index.html
├── package-lock.json
├── package.json
├── src
│   ├── add.js
│   └── index.js
└── webpack.config.js

プロジェクトの作成

まず、プロジェクトとなるディレクトリを作成します。

名前はなんでも良いですが、今回は webpack-dev-server-test というディレクトリ名にしました。ディレクトリを作成したら、cd コマンドで作ったディレクトリに移動しましょう。

mkdir webpack-dev-server-test //ディレクトリを作成します
cd webpack-dev-server-test/ //作成したディレクトリに移動します

次にプロジェクトを初期化するために以下のコマンドを実行します。完了すると package.json というファイルが作成されます。

npm init -y

必要なモジュールのインストール

必要なモジュールをインストールします。以下のコマンドを実行します。

npm install -D webpack webpack-cli webpack-dev-server

これで webpack, webpack-cli, webpack-dev-server という三つのモジュールがインストールされます。

webpackwebpack本体です。webpackは複数のjsファイルやcssファイルを一つにまとめます。(バンドルします)
今回の場合、index.js と add.js というファイルを bundle.js という一つのファイルにまとめます。
webpack-cliwebpack をコマンドで実行するためのモジュールです。
cli というのは「コマンドラインインターフェース」のことで結構頻出する単語なので覚えておくと良いでしょう。コマンドツールのことです。
webpack-dev-serverwebpackを使用した開発向けのwebサーバーです。
開発するのに便利な機能がたくさんあります。
例えば、ファイルを変更すると自動で反映されるなど。

webpack の動作を設定する

プロジェクト直下に webpack.config.js というファイルを作ります。

webpack や webpack-dev-server をどのように動かすかという設定ファイルです。

const path = require('path')

const distPath = path.resolve(__dirname,'dist') //これは dist というディレクトリを指します。

module.exports = {
  mode: 'development', //開発モードで動かします。

  entry: './src/index.js', // バンドルするときの開始ファイル
  output: {
    path: distPath, // バンドルしたファイル出力するファイル
    filename: 'bundle.js' //出力するファイル名
  },

  devServer: {
    port: '3000', //webpack-dev-server がリッスンするポート
    hot:true, // ホットリロードを有効化する
    open:true, // webpack-dev-server を起動した時にブラウザで自動的に開く
    contentBase: distPath, // webpack-dev-server のドキュメントルート
  },
}

HTMLファイルとJSファイルの配置

src というディレクトリを作成し、その中に js ファイルを置きます。

今回は index.js と add.js という二つのファイルを作成します。

index.js では id が app の要素に100 + 307の結果を表示する処理が書かれています。add 関数は後述する add.js で定義したものを import しています。

import {add} from './add'

const app = document.getElementById('app')
app.innerText = add(100, 307)

index.js で呼び出している add 関数は、add.js で定義されています。

export const add = (a, b) => a + b

index.html は dist というディレクトリを作って、その中に配置します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web test</title>
</head>
<body>
<h1>Hello</h1>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>

index.js で書かれていた id が app の div があることと、bundle.js を読み込んでいることがポイントです。

package.json にスクリプトを記述する

初期状態だと package.json のscripts には test というものだけが記載されています。

その下に、dev と build を追記します。

 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack serve",
    "build": "webpack"
  },

このように追記することで、npm run dev や npm run build とコマンドで実行することで、対応する処理が実行されます。

npm run dev の場合は、webpack serve が実行され、これは webpack-dev-server を起動します。

npm run build の場合は、webpack が実行され、バンドルされたファイルが出力されます。

webpack-dev-server を動かしてみる

実際にWebサーバーを起動してみます。

npm run dev

webpack-dev-server が起動します。

同時に、ブラウザが開き Hello と 407 が表示されれば成功です。

試しに、src/index.js の add の引数を変更してみましょう。

import {add} from './add'

const app = document.getElementById('app')
app.innerText = add(100, 309) // 307 を 309 に変更します。結果は 409 になるはずです。

コードを変更してファイルを保存すると、webpack-dev-server によって自動的に変更が検知されて、ブラウザが再リロードされて変更後の画面が表示されます。便利ですね。

webサーバーをとめたい時は、コマンドラインで Control + C を押すととまります。

バンドルされたファイルを出力してみる

開発については上記まででOKですが、本番環境に配置するファイルを出力したい場合は、先ほど定義した npm run build を実行します。

npm run build

コマンドが完了すると、dist ディレクト配下に bundle.js というファイルが出力されます。

中身をみてみると何やら難しいことが書かれているように見えますが、実は src/index.js と src/add.js まとめてくれた結果になっています。

webpack によってこのようにjsファイルがまとめられます。

webpack.config.js で output の path をdist にしたので、dist 配下に出力されました。

webpack.config.js をいろいろいじることで出力先やファイル名を変更することが可能なのでぜひ試してみてください。

まとめ

webpackやwebpack-dev-serverでは、様々な機能が提供されています。

今回はやったことは最も基本的なことなので、いろいろ試してみると面白いと思います。

JavaScript, webpack

Posted by たみぼうず