概要
ざっくりwebpack ~その壱~ の続き
前回は入出力の設定とビルドまでしたのでその続きをやってみる
まずブラウザで見たい
画面みずに作業できないし
折角バンドル出来ても実際の動作をブラウザで確認しない事には...
ということでブラウザで見れるようにしようぜ
準備しようか
んじゃまずは見るものを用意する
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ざっくりwebpack</title>
</head>
<body>
<p>はろーうぇぶぱっくでぶさーばー</p>
<script src="app.bundle.js"></script>
</body>
</html>
適当な.htmlを作ったら、前回ビルドした時に出来たpublic/ディレクトリにぶち込むぜ
ビルドしてたらapp.bundle.jsが出来てると思うけどまぁとりあえずそいつはシカトで
public/
├ index.html <- こいつね
└ app.bundle.js
これで見るものはOK
webpack-dev-serverとかいうやつ
誰でも簡単に開発サーバを立てられるモジュール
というわけでパッケージ入れちまおう
ターミナル
$ yarn add -D webpack-dev-server
webpack-dev-serverの設定
パッケージが入ったらwebpack.config.jsに設定を書いていくぞ
webpack.config.js
module.exports = {
{ ...省略 },
devServer: {
port: 3007,
contentBase: path.resolve(__dirname, 'public'),
watchContentBase: true,
open: true
}
}
port:
ポート番号を設定できる。この辺は空いてるポートをお好きにどうぞ
contentBase:
どこを基準にサーバ動かしたいかのかを設定する
上でpublic/にindex.html置いたし、もちろんpublicを起点にしたいよなってことでpublic一択
open:
webpack-dev-serverを動かしてサーバが立ち上がったと同時にブラウザを開くかどうかの設定
open: 'firefox'
とか書くとブラウザの指定もできる
watchContentBase:
livereloadとかいうやつ
ファイルに変更があったら勝手にブラウザリロードして変更箇所が反映されますよーみたいな
package.jsonにscriptを書く
以上、設定が終わったな
他にも色々設定できるんだけど、それはちゃんと調べなおして別で書いてみるとしよう
とりあえず今回はここまで出来たらpackage.jsonに追記して動かしてみようぜ
package.json
"scripts": {
"build": "webpack",
"start": "webpack-dev-server" <- これ
},
追記したらコマンド叩く
ターミナル
$ yarn start
ブラウザ立ち上がってindex.htmlが見れたよな？見れたよな？？
そしたら続きは其の参でやる。