はじめに
HRMというファイルの変更を検知して、ブラウザを更新させずにその変更を適用させる方法があると知った。
わかりやすくいうと、cssでcolorをblackからredにしてcssファイルを保存したら、ブラウザを更新させることなく、色が変わっているということ。
再読込させれば、ファイル全体を読む必要があるため時間もかかるけど、変更した箇所だけを更新してくれるため、作業時間が一気に減るよね。
ちょっとやってみよう!!
環境設定
1.参考
2.作業ファイル作成
$ mkdir work
$ cd work
3.webpackの導入
$ yarn init
question name (webpack-dev-server): WDS
question version (1.0.0):
question description:
question entry point (index.js):
question repository url:
question author:
question license (MIT):
question private:
$ yarn add -D webpack webpack-cli
$ ls
node_modules package.json yarn.lock
4.バンドルの準備
webpackはjsファイルの複雑な依存関係を解消して、1つのjsファイルにまとめてくれる。だから、作業用のファイル、出力用のファイルの置き場を作る
$ mkdir src dist
$touch dist/index.html src/index.js
今回は、作業用ファイルの置き場(src)、出力用のファイル置き場(dist)にする
5.コードの記入
function component() {
let element = document.createElement('div');
// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
<!doctype html>
<html>
<head>
<title>Getting Started</title>
<script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
コードはwebpackのチュートリアルから
src/index.jsのコードを説明すると、<div>Hello,webpack</div>をしただけ。
6.コードをprivateにする
コードを公開しないようにmainを消して、private: trueを追加。
{
"name": "WDS",
"version": "1.0.0",
"main": "index.js", //delete
"private": true, //add
"license": "MIT",
"devDependencies": {
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2"
}
}
7.lodashのインストール
dist/index.htmlにあるように、今、lodashというモジュールを外部から参照して使用している。
こういう風に<script>でurlを書いてあると編集するとき見づらいから、インストールしよう。
$ yarn add -D lodash
外部を参照する必要がなくなったことで、src/index.jsとdist/index.htmlは次のように変わる
import _ from 'lodash';
function component() {
let element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());
<!doctype html>
<html>
<head>
<title>Getting Started</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
しれっとdist/index.htmlの<body>の<script>のsrcがmain.jsに変わっていることに注意
8.ビルド
$ npx webpack
上記コマンドで、webpackが実行される。
WARNINGが出てるけど、あとで修正するため、現時点では放置して大丈夫
9.webpack.config.jsの設定
現在、webpackの設定はpackage.jsonでやってるけど、より細かい設定をするためにもwebpack.config.jsを使用する。
$ touch webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
現時点では、src/index.jsを読み込んで、dist/main.jsで出力ってことぐらいしか書いてないけどね。
新しい設定でbuildしてもらうためにも、次のコマンドを
$ npx webpack --config webpack.config.js
10.WARNINGの解消
npxの実行時に表示されていたWARNINGはmodeを設定していないという内容。
modeには2種類あって、developmentはコンパイルが早い、productionはコードの圧縮とかをしてくれるといった特徴がある。
まぁ、developmentで十分かな。
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist")
}
};
11.スクリプトの作成
これでほとんどの設定は終わったけど、ブラウザでどのように表示されるかを確かめるためには、ファイルの変更のたびにnpxを使わなければならない。
package.jsonにスクリプトを作成することで、その必要がなくなる。
{
"name": "WDS",
"version": "1.0.0",
"private": true,
"license": "MIT",
"scripts": {
"build": "webpack --watch",
"_comment": "watchオプションを追加することで、ファイルの変更のたびにwebpackが実行される"
},
"devDependencies": {
"lodash": "^4.17.11",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2"
}
}
"_comment"はコメントアウトの代わり。
JSONってコメントアウトできないのね。
これであとは変更のたびに、yarn buildすれば変更内容が適用される。
以上で設定は終わり。
いまがどんな感じで表示されるかは~/dist/index.jsをブラウザで確認。
webpack-dev-serverの導入
0.webpack-dev-serverについて
webpack-dev-serverがあれば、コードを変更したときに、自動がbuildがされる。
つまり、yarn buildをコンソールで使用したあとは、放置して、ずっとコードを見てればいいってこった。
1.webpack-dev-serverのインストール
$ yarn add -D webpack-dev-server
2.スクリプトの追加
コマンドでwebpack-dev-serverが起動するようにする。
{
"name": "WDS",
"version": "1.0.0",
"private": true,
"license": "MIT",
"scripts": {
"build": "webpack --watch",
"_comment": "watchオプションを追加することで、ファイルの変更のたびにwebpackが実行される",
"start": "webpack-dev-server"
},
"devDependencies": {
"lodash": "^4.17.11",
"webpack": "^4.25.1",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.10"
}
}
3.webpack-dev-serverの設定
これでも十分便利だけど、webpack-dev-serverに設定をさらに追加することでもっと便利になる。
webpack.config.jsに記入しますか。
const path = require("path");
module.exports = {
mode: "development",
entry: "./src/index.js", // このファイルを読み込む
output: {
filename: "main.js", //main.jsに出力
path: path.resolve(__dirname, "dist") //pathはdist
},
devServer: {
contentBase: path.join(__dirname, "dist"), //distがサーバーの起点となる(絶対パス)
port: 8080, //他のサーバーとポートが重ならないように
open: true //start実行時にブラウザに開く
}
};
portやopenは設定しなくても大丈夫だけど、contentBaseだけは必ず設定する。
そうじゃないと、webpack-dev-serverが読み込みすらしてくれない。
dist/index.htmlを表示しているブラウザとsrc/index.jsを開いたエディターを並べて、変更が適用されているかを確認して、できてればOK!!
webpack-dev-serverのことをもっと知りたい人は、webpack4対応webpack-dev-serverの主要な設定オプション(CLI,webpack.config.js)の意味と挙動を見てみることをオススメ。
HMRの導入
やってみたかったけど、なかなかうまく行かなかったため、あとで記事にします。