webpack4 で HTML & JS なライブリロード可能なローカルサーバを立てる

webpack 4 を最近触って覚えてきたので情報を自分用にまとめていく。

webpack 4 でローカルサーバを立てる必要があり (やりたかったのは SPA 用のフロント確認用ローカルサーバを立てる事)、それを色々やっていた。 要件は PJ 事情があり複雑なので、一旦シンプルな形でそれだけをやれる環境作りを行なった。

webpack 4 でローカルサーバ

webpack 4 には開発用サーバを立てる機能があり、それでフロント開発を行なう (最近は ローカル html を直で開いで JS や外部との疎通が出来ない状況になりつつあるので、必要だったりする)。

導入パッケージとしては、webpack, webpack-dev-server, html-webpack-plugin となる。 ちなみに webpack のローカルサーバ周りは色々周り道した結果 webpack-dev-server に返ってきたらしいので、また何かある可能性あるかも (node 周りそんなのばっかりな印象)。

環境用意

yarn で使う環境をたてる (npm でセットアップは入れるものが分かれば置き換えるだけなので割愛)。

$ yarn add webpack --dev
$ yarn add webpack-dev-server --dev
$ yarn add html-webpack-plugin --dev

html-webpack-plugin は HTML を webpack が扱うために使うプラグインで、/public 以下に配置された html ファイルをビルド後ファイルの配置ディレクトリに移すために使用。

設定

下記設定を package.json に入れる。

// package.json
  "scripts": {
    "server": "webpack-dev-server"
  }

webpack.config.js の設定。

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')

const path = require('path')

module.exports = {
  plugins: [
    new HtmlWebpackPlugin({
      // 移動させる html ファイルを指定 (このファイルに webpack でビルドされた JS や CSS が自動で設定される)
      template: './public/index.html'
    })
  ],

  mode: 'development', // 例なので固定
  entry: {
     // /src/index.js を index.html に読込設定する
    'js/app': './src/index.js',
  },

  // 出力設定
  output: {
    // /dist に出力
    path: path.resolve(__dirname, 'dist'),
    // 公開される際の BASE URL 指定
    // ビルドされたソース等の読込設定とあっていないと読めないので注意
    // 参考: https://webpack.js.org/configuration/output/#outputpublicpath
    publicPath: '/',
    // JS の出力指定 [name] がビルドした各ファイルの名前になる
    filename: 'js/[name].js'
  },

  // ローカルサーバの設定 (webpack-dev-server 用設定)
  devServer: {
    // リロードの為のファイル監視
    watchContentBase: true,
    // コンテンツの提供元ディレクトリを設定
    // 単純に静的なページを確認したいだけなら output で出力先を設定せず、静的ファイルを置いているディレクトリを直で指定でもいい
    contentBase: path.resolve(__dirname, 'dist'),
    // ローカルサーバ立ち上げ時にブラウザで指定ページを開くかどうか (openPage で指定がない場合、index に指定したものか、ローカルサーバのトップを開く)
    open: true,
    // index ファイル (指定がない場合に標準で開くファイル) としてどれを扱うか
    index: 'index.html',
    // ビルドメッセージをブラウザコンソールに出すかどうか
    inline: true,
    // HMR (HotModuleReplacement) を有効にするかどうか
    // HMR とは: https://webpack.js.org/concepts/hot-module-replacement/
    hot: true,
    // 全てのコンテンツを gzip 圧縮かけるか
    compress: true,
    // 実行中の進捗をコンソールに出すか
    progress: true,
    // ローカルサーバの立ちあげ Port 番号 (8080 はサンプルで良く使われるので、他で使ってる場合変更する)
    port: 8080
  }
}

実行

• 一応 JS を含めた (Vue など VDOM を扱ったりする所まで使えそうな) 想定
• 完全静的で、HTML, CSS (Sass 含めた) の確認程度なら JS 周り (output, html-webpack-plugin 導入と設定) は不要で、 devServer 周りだけで良いし、publicPath が静的ページを配置したディレクトリを指定していれば問題ない)

$ yarn server

感想

最初調べ初めた時は業務で使う為、業務の要件にあわせて調査していた。 でも要件が複雑で、webpack を知らない人間が取りかかるには情報が無さすぎるため、一つずつバラして公式と戦うというオーソドックスな戦法だけが正義だった。

webpack 周りは全然情報が無い上に 3 と 4 で想定がしれっと変わってたり戻ったりするので割と事情通じゃないと辛そうだった。 今は Vue で扱ってるので、正直 vue cli のビルドに載せる方が良かったんだろうと思いつつ、あまりビルドがそこを主軸にすると辛そうなイメージがあったので昨今のフロント事情を知るために webpack でやった。 React 界隈が何を使ってビルドするのが普通か分からないけど、多分 webpack で理解しておけばしばらくは大体戦える筈。

他にも設定出来る項目は webpack-dev-server にはあるので、下記を参考に調整するので良いと思う (主要なところは大体書いた気はする)。 https://webpack.js.org/configuration/dev-server/