[webpack] DevServerをインストールする

webpackへDevSErverをインストールして、作成したプログラムを簡単に確認する方法を説明します。

インストール

npm add webpack-dev-server --dev

webpack.config.jsに追記

webpack.config.jsに下記を追記する

module.exports = {
  devServer: {
    static: {
      directory: './public',
    },
    port: 8080,
    open: true,
    watchFiles: ['src/**/*', 'public/**/*'],
    compress: true,
  }

オプション

オプションの意味は下記の通り

DevServerの起動時にブラウザを自動で開く

open: true

DevServerからの応答でgzip圧縮を有効にする

compress: true

ファイルが変更されたビルドし直してくれる

watchFiles: ['src/**/*', 'public/**/*'],

起動確認

ここまで作業したら、コマンドnpx webpack-dev-serverでサーバが起動することを確認する。

npx webpack-dev-server

package.json

package.jsonに追記する。

{
  "scripts": {
    "dev": "npm run webpack:dev && npm run webpack:dev-server",
    "webpack:dev-server": "npx webpack-dev-server --config ./webpack.config.dev.js",
    "webpack:dev": "npx webpack --config ./webpack.config.dev.js",
  },
}

これで、npm run devするだけで、ビルドした上でDevServerが起動され、さらにブラウザが自動起動して表示されるようになる。

Amazonでおトクに買い物する方法