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

webpack-dev-serverの導入、設定

More than 1 year has passed since last update.

webpack-dev-serverを導入して、開発を効率的にしよう

以下、記事の続きになっています。
自分の環境に読み替えるのが面倒な方は、以下記事も参考に読んでみてください。
webpack事始め

webpack-dev-serverを導入するメリット

webpack-dev-serverはwebpackを使用したフロントエンド開発時に利用できる開発環境向けのwebサーバーです。

webpackのバンドル対象のファイルをバンドルする度にwebpackコマンド打ち込むのは面倒。ブラウザの立ち上げ、レンダリング結果の確認も効率的にしたい。

上記、開発時にちょっと不便な点を解決するためにwebpack-dev-serverを使用します。

開発時に便利なパッケージなので試してみましょう。
https://github.com/webpack/webpack-dev-server

導入してみる

インストールします。

//最新のバージョンを確認してみる
$npm info webpack-dev-server
//インストール
$npm install --save-dev webpack-dev-server@3.8.0 

起動します。

 $npx webpack-dev-server

スクリーンショット 2019-09-15 10.52.26.png

上記コマンドでスクショにあるようなパスが表示されるので、アクセスしてみましょう。(パスは適宜、読み替えてください)

http://localhost:8081/

すると、このような画面が表示されます。
スクリーンショット 2019-09-22 10.58.01.png
ページにアクセスしたい場合は、パスを指定しましょう。

http://localhost:8081/dist/

パス指定して、ページにアクセスするのも面倒です。次に、設定ファイルを編集して、もう少し使い勝手の良い形に改善しましょう。

一旦、ctrl + Cwebpack-dev-serverは落としておきましょう。

ドキュメントルートを設定する

では、webpack-dev-server起動時、ブラウザを立ち上げ、ドキュメントルートにアクセスする設定を書いてみましょう。

設定はwebpack.config.jsで行います。

webpack.config.js
// 出力は絶対pathで指定しなければいけない為、node.jsのpathモジュールを使用する
const path = require('path');
const outputPath = path.resolve(__dirname, 'dist');

module.exports = {
    // バンドルするファイルを指定
    entry: './src/index.js',
    output: {
        // バンドルしてmain.jsとして出力
        filename: 'main.js',
        path: outputPath
    },
    // webpack-dev-serverを立ち上げた時のドキュメントルートを設定
    // ここではdistディレクトリのindex.htmlにアクセスするよう設定してます
    devServer: {
        contentBase: outputPath
    }
}

以下、コマンドを実行してみましょう。--openオプションを追加する事で同時にブラウザを立ち上げる事ができます。

コマンド実行と同時に、ブラウザが立ち上がり、ドキュメントルートに設定したページが表示されているはずです。

$npx webpack-dev-server --open

また、webpack-dev-serverは、バンドル対象ファイルの動的な更新に追従してwebpackによるバンドルがリアルタイムに実行してくれます。

試しにutilities.jsを変更してみてください。

utilities.js
// ある数字を引数として与えるとその数字の2乗の数を返す
export function double(num) {
    return num**2;
}

// 変更してみる
export const NAME = 'バンドルされてる?';

ブラウザでlogを確認するとこのようにリアルタイムで更新された事を確認できたはずです。
スクリーンショット 2019-09-22 11.27.47.png

このように、webpack-dev-serverが、ファイルを監視してくれてる事で更新を検知して、webpackによるモジュールバンドルを行ってくれます。

webpack-dev-serverはアプリケーション開発時に便利なツールかと思います。是非、試してみてください。

webpack dev server 公式Doc

10mi8o
もふもふした動物と音楽が好き。いつかは「完全に理解した」と言いたい。
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
ユーザーは見つかりませんでした