Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
45
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

webpack-dev-serverの導入、設定

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

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
45
Help us understand the problem. What are the problem?