9
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

Organization

hot reloadを自前のexpressサーバーに組み込む

こんにちは。明治大学総合数理学部現象数理学科の鈴木です。2016年度からWeb Engineerはじめて、現在はPlaid, incでインターン中です!明治大学総合数理アドベントカレンダーを@ryunryunryunを巻き込んで作ってみたのですが、カレンダーはスッカスカです!(ネタも思いつかないし)

最近のwebpackだと、webpack-dev-serverをインストールすれば、簡単にhot reload開発ができるようになります。しかし、既にサーバー側のコードを書いていて、そちらにhot reloadを組み込みたい場合もあると思います。今回は、Expressサーバーにhot reloadを組み込む方法を記事にしてみました。

Hot reloadとは

Hot reloadとはコードを変更したときマニュアルでリロードしなくとも、自動でリロードしてくれることを言います。ただ単にブラウザで開いているページをリロードするのではなく、VueやReactであれば、そのコンポーネントの状態をリロードしてくれるという代物です。

ここを読んでみてください!

Getting Started

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

hot reloadに必要なモジュール

npm i --save-dev express webpack webpack-dev-middleware webpack-hot-middleware

なんとなくpugがほしいので

npm i --save-dev pug

webpackの設定を書く

  • entrypointの設定は配列の形式すること
  • output先のフォルダをoutput.publicPathにも設定すること
  • HotModuleReplacementPluginをpluginsに入れること
  • 開発時にのみhot reloadを設定すること
/webpack.config.js
const path = require('path')
const webpack = require('webpack')
const isProd = process.env.NODE_ENV === 'production'

const webpackConfig = {
  // webpack config
  entry: {
    app: [path.resolve(__dirname, 'client.js')]
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/'
  },
  plugins: []
  // ...
}

if (isProd) {
  // ...
} else {
  // dev
  webpackConfig.entry.app.unshift('webpack-hot-middleware/client')
  webpackConfig.plugins.push(
    new webpack.HotModuleReplacementPlugin()
  )
}

module.exports = webpackConfig

Express Server

これをserverに追加するだけで終わりです。

const webpack = require('webpack')
const webpackConfig = require('./webpack.config.js')
const compiler = webpack(webpackConfig)
app.use(require('webpack-dev-middleware')(compiler, {
  noInfo: true, publicPath: webpackConfig.output.publicPath
}))
app.use(require("webpack-hot-middleware")(compiler))

例では、開発時のみhot reloadを有効にするようにしています。また、リクエストが来たらhot reload付きで./index.pugをrenderするようにしています。

/server.js
const express = require('express')
const app = express()
const isProd = process.env.NODE_ENV === 'production'

if (!isProd) {
  const webpack = require('webpack')
  const webpackConfig = require('./webpack.config.js')
  const compiler = webpack(webpackConfig)
  app.use(require('webpack-dev-middleware')(compiler, {
    noInfo: true, publicPath: webpackConfig.output.publicPath
  }))
  app.use(require("webpack-hot-middleware")(compiler))
  }
}

app.set('view engine', 'pug')

app.use((req, res, next) => {
  res.render('index')
})

const server = setup(app)

server.listen(8080)

Client Side

/client.js
// any js code. eg vue/react/...
/index.pug
html
  header
    title hot reload
  body
    #app
    script(src="/dist/app.js")

DONE

これで終わりです。後は、server.jsを実行するだけです。また、server.js内でwebpackのcompileをしているため、webpack watchをする必要はありません。コードを書いたら直ぐにブラウザ上に反映されるはずです!最後に、webpackにvue-loaderなりなんなりを入れてSPAをhot reloadで開発してみましょう!

ただ、大規模開発のときはどうなるんでしょうか?? 重そう。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
9
Help us understand the problem. What are the problem?