webpack-dev-server

参考:

webpack/webpack-dev-server: Serves a webpack app. Updates the browser on changes – GitHub

使い方

プロジェクトディレクトリを作成する。

$ mkdir web && cd $_

webpackwebpack-cliwebpack-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

参考:

devServer.progress is only available trough cmd and not trough webpack.config · Issue #201 · webpack/webpack-dev-server – GitHub

options.progress – webpack-dev-server/webpack-dev-server.js at v3.1.10 · webpack/webpack-dev-server – GitHub

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

参考:

devServer: setting clientLogLevel to none to actually mute all annoying browser console logs by Microsmsm · Pull Request #6265 · webpack/webpack – GitHub

setLogLevel

import { setLogLevel } from '../node_modules/webpack/hot/log'

if (module.hot) {
  setLogLevel('error')
}

参考:

devServer: setting clientLogLevel to none to actually mute all annoying browser console logs by Microsmsm · Pull Request #6265 · webpack/webpack

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

参考:

bripkens/connect-history-api-fallback: Fallback to index.html for applications that are using the HTML 5 history API – GitHub

webpack-dev-server で実行しているか判定する

const inDevServer = process.argv.find(
  v => v.includes('webpack-dev-server')
)

参考:

How to detect from within a plugin whether the webpack is running a single build or a webpack-dev-server? · Issue #305 · webpack/webpack-dev-server – GitHub

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

ビルドしたファイルを静的に書き出す

参考:

gajus/write-file-webpack-plugin: Forces webpack-dev-server to write bundle files to the file system – GitHub

write-file-webpack-plugin – npm

write-file-webpack-plugin の紹介 (webpack-dev-server で静的書き出し) | バシャログ。

How to compile, write on disk and serve static content (js/css) using webpack-dev-server – Stack Overflow

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

Does not copy files to actual output folder when webpack-dev-server is used · Issue #29 · webpack-contrib/copy-webpack-plugin – GitHub

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

参考:

webpack-dev-server の基本的な使い方とポイント | dackdive’s blog

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Protected by reCAPTCHA