webpackでtsc -wみたいな物を使いたい（webpack-dev-server）

6916 ワード
webpack webpack テキストリンク

現状、bundle.jsを作成するときは以下のコマンドを毎回実行しています。

npm run build

これって正直面倒ですよね、、、

tcsコマンドのウォッチモードのように自動でbuildしてくれたら楽なのになって思います。

そんな時に使えるのがwebpack-dev-serverです

tsファイルを編集して保存した瞬間にbunsle.jsに反映しブラウザをリロードしてくれるという優れものです。

1.webpack-dev-serverをインストールする

以下のコマンドを実行する。
npm install --save-dev webpack-dev-server

2.設定ファイルに記述

package.jsonのscriptタグの中に以下を記述します。

package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server"   //これを追加
  },

3.コマンド実行し起動

1.以下のコマンドを実行。
npm run start

2.以下のように表示される
ℹ ｢wds｣: Project is running at http://localhost:8080/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/nakashun1129/projects/dailyfoodscore
ℹ ｢wdm｣: Hash: 5c430d94a051915bf398
Version: webpack 4.43.0
Time: 3258ms
Built at: 2020/07/07 16:17:04

localhost:8080にアクセスするとアプリケーションのページが表示されるようになる。

------ここから少しややこしくなります------

実はwebpack-dev-serverは起動時にbundle.jsを作成しています。

しかし、ローカルのディレクトリに作られるわけではありません。

ん？どういうこと？って感じですよね。

なるべくわかりやすく説明します。

現状のファイル構造はこうなっています。

distフォルダの中にbundleされたjsファイルがあります。

これを一度消した上で再度webpack-dev-serverを起動させてみます。

あれ、作られませんね。。。

bundle.jsは作りますが、ファイルは作らないんです。

ん？どういうこと？となりますよね。

webpackが内部的にもっているんです。

その内部的にもっているbundle.jsにアクセスする方法があります。

URLに ' /budle.js ' を追加するとアクセスできます。

これで、bundle.jsが作られていることがわかりますね。

しかし、localhost:8080にアクセスしてもjsファイルが読み込まれていません。

その理由は、HTMLファイル上での呼び出しもとが違うからです。

index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="dist/bundle.js" defer></script>
</head>

かといって、毎回書き換えるのも面倒ですよね。。

webpackはこれも解決してくれます。

設定ファイルのoutputに以下を追加しましょう。

webpack.config.js
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/' //これを記述するとwebpackがどこにbundle.jsを返すかを指定できる
  },

これでwebpackが、HTMLファイルで指定した呼び出しもとにbundle.jsを返してくれるようになりました。

実際にアクセスしてみましょう。

dist/bundle.jsになりましたね。

これで、　tsファイルを編集して保存したタイミングで自動的にbundle.jsにも反映されるようになりました。

試しに確認してみましょう。

main.ts
import { Foods } from "./foods";
console.log('hello'); //これを追加
Foods.getInstance();

これを保存したタイミングでブラウザにも反映されるはずです。

問題ないですね。

こんな感じで非常に便利になりました。