webpack-dev-server
参考：
webpack/webpack-dev-server: Serves a webpack app. Updates the browser on changes – GitHub
使い方
プロジェクトディレクトリを作成する。
$ mkdir web && cd $_
webpack、webpack-cli、webpack-dev-server パッケージを追加する。
$ yarn add webpack webpack-cli webpack-dev-server
src/index.js を作成する。
$ mkdir src
$ echo 'console.log("Hello, Webpack!")' > src/index.js
index.html を作成する。
$ echo '<html><head><title>Test</title><script src="/dist/main.js"></script></head><body>Hello</body></html>' > index.html
webpack-dev-server を起動する。
$ yarn run webpack-dev-server
http://localhost:8080 をブラウザで開いて、DevTools のコンソールに「Hello, Webpack!」が出力されていることを確認する。
参考：
webpack-dev-server の基本的な使い方とポイント | dackdive’s blog
webpack-dev-server で開発用サーバを立てる | 30歳からのプログラミング
webpack-dev-server | Webpack 1.13.0 日本語リファレンス | js STUDIO
Using webpack-dev-server – Development | Webpack [Official]
webpack-dev-server | SurviveJS
webpack dev server · webpack/docs Wiki – GitHub
導入
参考：
webpack-dev-server の導入、設定 – Qiita
設定
参考：
Webpack4 を使って webpack-dev-server のベーシック設定 – Qiita
DevServer | Webpack [Official]
オプション (CLI/config)
参考：
webpack4 対応 webpack-dev-server の主要な設定オプション (CLI, webpack.config.js) の意味と挙動 – Qiita
webpack dev server · webpack/docs Wiki – GitHub
ブラウザを開く (--open オプション)
参考：
Webpack DevServer --open option – Stack Overflow
--hot
参考：
webpack-dev-server --hot vs HotModuleReplacementPlugin() – Stack Overflow
auto-reload
参考：
webpack-dev-server の auto-reload でハマったこと – Qiita
webpack-dev-server 利用時の auto-reload について | hinosita’s diary
webpack-dev-server で開発用サーバを立てる | 30歳からのプログラミング
Why webpack-dev-server Live-Reload Is Not Working – Code Oil – Medium
HMR (Hot Module Replacement)
参考：
Hot Module Replacement の設定と仕組みを理解する – Qiita
モジュールを HMR に対応するための実装について – Qiita
Hot Module Replacement – Concepts | webpack Documentation [Official]
Hot Module Replacement – Guides | webpack Documentation [Official]
devServer.hot – DevServer | webpack Documentation [Official]
devServer.hotOnly – DevServer | webpack Documentation [Official]
host
参考：
webpack-dev-server に localhost 以外からアクセスできるようにする場合は disableHostCheck: true を config に書く | 約束の地
webpack-dev-server で起動したアプリを localhost ではなく 0.0.0.0 で外部に公開する方 | tackeyy.com
--host 0.0.0.0 Not working · Issue #882 · webpack/webpack-dev-server – GitHub
--progress/devServer.progress
参考：
pretty
webpack-dev-server --progress --color 相当の出力をする
pretty: true
progress を出力しない
pretty: false
参考：
Customizing Logging – webpacker/webpack-dev-server.md at v4.0.0.pre.3 · rails/webpacker – GitHub
clientLogLevel
参考：
setLogLevel
import { setLogLevel } from '../node_modules/webpack/hot/log'
if (module.hot) {
setLogLevel('error')
}
参考：
loglevel
参考：
LogLevel conflict. Always setting level to INFO · Issue #1064 · webpack/webpack-dev-server – GitHub
proxy
参考：
webpack-dev-server で、一部のリクエストを別サーバーへ転送する | YoheiM .NET
devServer.proxy – DevServer | Webpack [Official]
historyApiFallback
参考：
webpack-dev-server で実行しているか判定する
const inDevServer = process.argv.find(
v => v.includes('webpack-dev-server')
)
参考：
How to detect if webpack-dev-server is running? – Stack Overflow
Webpacker.dev_server.hot_module_replacing?
参考：
Hot Module Reloading with Webpacker – Ruby Inside – Medium
write-file-webpack-plugin
ビルドしたファイルを静的に書き出す
参考：
write-file-webpack-plugin – npm
write-file-webpack-plugin の紹介 (webpack-dev-server で静的書き出し) | バシャログ。
Webpack dev server to write bundle.js for every edit – Stack Overflow
copy-webpack-plugin
参考：
webpack-contrib/copy-webpack-plugin: Copy files and directories with webpack – GitHub
CopyWebpackPlugin | Webpack [Official]
gulp.dist を CopyWebpackPlugin で再現する – Qiita
react-hot-loader
参考：
gaearon/react-hot-loader: Tweak React components in real time – GitHub
webpack4 HMR rect-hot-loader の設定 – Qiita
webpack/webpack-dev-middleware
参考：
webpack/webpack-dev-middleware: A development middleware for webpack – GitHub
webpack 1.x
参考：