zukucode
主にWEB関連の情報を技術メモとして発信しています。

webpack-dev-serverで開発サーバーを起動する

webpack-dev-serverで開発サーバーを起動します。

ファイルやフォルダ構成などの環境はvueファイル(単一ファイルコンポーネント)をwebpackでビルドで紹介したものと同様とします。

パッケージのインストール

webpack-dev-serverをインストールします。

$ npm install --save-dev webpack-dev-server

webpack.config.jsの設定

webpack.config.jsdevServerの設定を追記します。

webpack.config.js
const webpack = require('webpack');

module.exports = {
  entry: './resources/assets/js/app.js',
  output: {
    path: __dirname + '/public',
    publicPath: '/',
    filename: 'js/app.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            js: 'babel-loader'
          }
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },
  devServer: {
    contentBase: __dirname + '/public',
    publicPath: '/',
    noInfo: true,
    historyApiFallback: true
  }
};

scriptコマンドの設定

package.jsonscriptswebpack-dev-serverを実行するコマンド(devとします)を追記します。

package.json
// 一部抜粋
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "webpack": "webpack",
  "dev": "webpack-dev-server --open"
},

--openのオプションを設定するとwebpack-dev-serverを実行したときに自動でブラウザが起動します。必要ない場合は--openを削除します。

index.htmlの作成

vueファイル(単一ファイルコンポーネント)をwebpackでビルドでビルドしたapp.jsを読み込んで動作確認をするhtmlページを作成します。

publicフォルダの直下に作成します。

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <main id="app">
    </main>
    <script src="./js/app.js"></script>
  </body>
</html>

ここまでのフォルダ構成は以下になります。

  • node_modules
  • public
    • js
    • index.html
  • resources
    • assets
      • js
        • components
          • App.vue
        • app.js
  • .babelrc
  • package.json
  • webpack.config.json

実行

npm run devを実行するとブラウザが起動して、localhost:8080が表示されるはずです。表示されない場合はlocalhost:8080にアクセスしてみてください。

vueファイル(単一ファイルコンポーネント)をwebpackでビルドでビルドしたapp.jsが読み込まれ、赤字でhello worldと表示されることを確認できます。


関連記事

  • webpack lessをImportしてビルドする

    htmlやbodyなどに適用するベースのクラスを外部のlessファイルに実装して、スタイルをサイト全体に適用したい場合があります。外部のlessファイルをモジュールとしてImportしてwebpack...


  • webpack-dev-serverで開発サーバーを起動する

    webpack-dev-serverで開発サーバーを起動します。vueファイル(単一ファイルコンポーネント)をwebpackでビルドページで紹介したwebpack.config.jsにdevServe...


  • webpack モジュールのパスを絶対パスで指定する方法

    自分で作成したモジュールをインポートするときはインポートするファイルを基準に相対パスで指定する必要があります。フォルダ構成によっては深く階層を辿らないといけないので、フォルダ構成が変わってしまうと大変...


  • vueファイル(単一ファイルコンポーネント)をwebpackでビルド

    vueファイル(単一ファイルコンポーネント)をwebpackでビルドする手順を紹介します。バージョンは、Vue.jsは2.x、webpackは2.xです。わかりやすくするため、空のプロジェクトから出来...


  • Vue.js lessを使いwebpackでビルドする

    .vueファイル(単一ファイルコンポーネント)のstyleをcssではなくlessで実装して、webpackでビルドをします。vue-loaderのオプションにlessのloaderを追加します。


  • vue-router webpackでページごとにファイルを分割する

    vue-routerでシングルアプリケーションを作成していると、ページ数が増えるにしたがって作成されるjsファイルのファイルサイズもどんどん増えていきます。ページごとにファイルを分割し、そのページがア...


  • Vue.js webpackでHot Module Replacementを行う

    開発を効率化するために、Hot Module Replacement(HMR)の設定を行います。Hot Module Replacementを設定しておけば、ブラウザの再読込は行わず、修正した箇所のみ...


  • Vue.js lessで外部のlessファイルをImportする

    メインカラーなどの共通情報は外部のlessファイルに記載し、各vueファイルではそのlessファイルをImportして実装するのが効率的です。.vueファイル内のlessで外部のlessファイルをIm...


  • ExtractTextPluginでcssファイルを出力する

    webpackのプラグインExtractTextPluginを使って、ビルドされたjsファイルからstyleの部分を抽出してcssファイルで出力します。extract-text-webpack-plu...


  • Vuex actionでローディングアイコンを表示する

    actionでajaxを行うときにローディングアイコンを表示させます。Vuexのstoreにloadingの状態を持つようにします。また、mutationでloadingの状態を変更でするようにします...