webpack-dev-serverをちょっとだけ調べる。

webpack-dev-serverはwebpackのためのライブロード機能のついたサーバです。

ファイルの変更などを監視しており、すぐにリビルドして、自動でリロードしてくれます。

とっても、便利。

上司が準備してくれたんだ!

でも、全然設定分からないんだ!

ということで、軽く調べる。

その1. package.jsonwebpack.config.jsを準備します。

※ 実際にコメント書いちゃだめだよ!
※ 下記は動きません

//webpack.config.js
var glob = require('glob');
var webpack = require('webpack');
var path = require('path');

module.exports = {
  // ビルドの起点となるファイルのパスを指定する
  entry: './src/js/index.js',

  // 出力先
  output: {
    publicPath: 'dist/',
    filename: "main.min.js"
  },

  module: {
    // node_modules以下を除き、.jsファイルにbabel-loaderを使用する
    loaders: [
      {test: /\.js?$/, exclude: node_modules, loader: 'babel-loader'}
    ],
    noParse: [/moment.js/]
  },

  resolve: {
    root: path.join(__dirname, 'src/js'),
    modulesDirectories: 'node_modules',
    // ビルド対象に含めたいファイルの拡張子を配列で記載する
    extensions: ['', '.coffee', '.webpack.js', '.web.js', '.js']
  },

  // webpack-dev-serverの設定
  devServer: {
    // キャッシュしない
    cache: false,
    // コンテンツルート
    contentBase: './src', 
    //ホットモードで起動(それ意外あるの?)
    hot: true, 
    // iframeモードとinlineモードがある
    // iframeモード:アプリケーションがiframeを埋め込まれており、余計なヘッダがついてくる
    // inlineモード:更新でページ再読み込み
    inline: true, 
    //出力に色つきにするか
    colors: true, 
    //dev-serverのポートの指定
    port: 8000
  }
}
// package.json 
{
  "name": "my-service", // 必須
  "version": "0.0.1", // 必須
  "scripts": {
    "gulp": "gulp",
    "dev-server": "webpack-dev-server"
  },
  "devDependencies": {
    // webpackやgulpなど開発に必要なパッケージ
  },
  "dependencies": {
    // 実行に必要なパッケージ
  }
}

webpack-dev-serverwebpack.config.jsの内容に沿ってファイルのビルドを行ってくれますが、結果はメモリ上に保存されるだけで、実際にファイルが更新されている訳ではありません。

結果を出力する際は別に、gulpなりなんなりビルドを行う必要があるんだって。

その2. package.jsonで指定したnpm run dev-serverを実行する。

はい、エラー。

もうだめぽ。

早く開発したい。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク