目的
スクリプト（とりあえずJavaScript）変更時、自動的にビルドを行いたい
前提
以下の環境で確認
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
実現方法
ファイル配置
C:.
| package-lock.json
| package.json
| webpack.config.js
|
+---dist
| index.html
|
+---node_modules
| (省略)
|
\---src
index.js
myutil.js
配置したファイル
src/index.jsでsrc/myutil.jsをimport
index.js
import * as util from "./myutil";
console.log(util.Msg);
myutil.js
export const Msg = "Hello World"
dist/index.htmlでは、出力予定のmain.jsをscriptタグに記載
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sample</title>
</head>
<body>
<script src="./main.js"></script>
</body>
</html>
例ではcontentBaseのみ指定（localhost:8080にアクセスした際、参照するフォルダ）
- src/index.jsがエントリポイントの為、entryを省略
- webpack-dev-server で動作させるだけであれば、メモリ上で処理されファイル出力をしないため、outputを省略
webpack.confing.js
module.exports ={
devServer:{
contentBase:"./dist"
}
};
実行、確認
webpack-dev-server起動
.\node_modules\.bin\webpack-dev-server
localhost:8080にアクセス後src/index.js若しくはsrc/myutil.jsを修正、保存する
- 自動的にビルド（bundle）される事を確認
- localhost:8080で修正内容が反映されている事を確認
参考
速習WebPack
https://www.amazon.co.jp/dp/B07CQLGGP9
devServerパラメーター
https://webpack.js.org/configuration/dev-server/