Help us understand the problem. What is going on with this article?

webpack入門して仲良くなりたい~開発環境編~

仲良くなりたい

Loadersのことを書こうと思っていたんですが、開発をもっと楽にできそうなのでその設定をここにまとめます

前回のファイル構成をここに載せておきます

 webpack-friendly-basic
 ├ ─ ─ node_ modules
 ├ ─ ─ package.json
 ├ ─ ─ package-lock.json
 ├ ─ ─ dist
 │     ├ ─ ─ bundle.js
 │     └ ─ ─ index.html
 ├ ─ ─ src
 │     ├ ─ ─ js
 │     │     └ ─ ─ app.js
 │     └ ─ ─ modules
 │           ├ ─ ─ add.js
 │           ├ ─ ─ subtract.js 
 │           ├ ─ ─ multiply.js 
 │           └ ─ ─ divide.js       
 └ ─ ─ webpack.config.js

webpack-dev-server

npm install -D webpack-dev-server@3.10.3

このパッケージはwebpackを使った開発で使うと便利なやつです
これを入れることで開発がラクになるので入れます
とりあえず実行してみます

npx webpack-dev-server

image.png

実行すると画像のように、プロジェクトの実行ページのURLがあるのでアクセスすると

image.png

こんなページだと思います。
バンドルしたファイルを確認するindex.html/distにあるのでそれをクリックするとこんな感じだと思います。

image.png

これでは、なにも楽ではないです。

次はビルドしたときに自動でこのブラウザを開くようにします。

npx webpack-dev-server --open

--openをつけることで自動でブラウザの立ち上げを行います。
手間が少し減りました。

自動リビルド

次はバンドル対象のファイルに変更があった場合に自動でリビルドがかかるようにします。
そのためにwebpack.config.jsの設定を変えます。

webpack.config.js
const path = require("path");
const outputPath = `${__dirname}/dist`;

// モジュールどうやって出力するか記述します
module.exports = {
  // 実行環境設定
  mode: "development",
  // エントリー ポイントを決めます
  entry: "./src/js/app.js",
  output: {
    // どこにバンドルファイルを出力するか決まます
    path: outputPath,
    // 出力先のファイル名を決めます
    filename: "bundle.js"
  },
   // 追加設定
  devServer: {
    contentBase: outputPath
  }
};

この設定をすることで、ブラウザが開いた時の場所の設定ができます。
webpack.config.jsの変更を反映させます

npx webpack

自動ビルドする開発環境でブラウザを開きます

npx webpack-dev-server --open

ブラウザが開かれて、開発者ツールを確認して
Live Reloading enabled.と表示されていれば成功です。

image.png

この状態で、バンドルされたファイルのapp.jsmodulesのファイルの変更が自動で反映されます。
ここで注意しなければならないのは
バンドルの対象ではないindex.htmlの変更は反映されません

さらに、/distのディレクトリ構成に注意が必要でした

 dist
 ├ ─ ─ js
 │     └ ─ ─ bundle.js 
 └ ─ ─ index.html

このように、bundle.jsindex.htmlの階層が同列でない場合はなぜか効きませんでした。

 dist
 ├ ─ ─ bundle.js
 └ ─ ─ index.html

これなら効きます

package.json

最後にwebpack-dev-server --openというコマンドを短くします
package.jsonを開いてscriptsに変更を加えます

package.json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack",
    "dev": "webpack-dev-server --open"
  }

startdevを加えました
この設定を行うことで、ターミナルでの実行時のコマンドを変えることができます。

npx webpack

npm start

npx webpack-dev-server --open

npm run dev

ラクになった

自分的にはこれで結構楽になったんじゃないかなと思います。

次こそローダーについて書きます。

何か、ご指摘があれば教えてくれると嬉しいです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした