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

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
25
Help us understand the problem. What is going on with this article?
@nasum

Vue.js で Hot Module Replacement をやってみた

More than 3 years have passed since last update.

はじめに

最近Vue.jsの2.0がリリースされました。2.0になることによりいろいろなことが変わりましたが、自分が一番気になったのはHMRが出来るようになったことです。

今回はVue.jsでHMRを行うサンプルを作ってみました。

package.json

必要なパッケージをpackage.jsonから抜粋しました。

"devDependencies": {
  "babel-cli": "^6.16.0",
  "babel-core": "^6.17.0",
  "babel-loader": "^6.2.5",
  "babel-preset-es2015": "^6.16.0",
  "css-loader": "^0.25.0",
  "node-sass": "^3.10.1",
  "sass-loader": "^4.0.2",
  "vue-hot-reload-api": "^2.0.6",
  "vue-loader": "^9.5.1",
  "webpack": "^1.13.2",
  "webpack-dev-server": "^1.16.2"
},
"dependencies": {
  "vue": "^2.0.1"
}

大事なのはvue-hot-reload-apiwebpack-dev-serverです。この二つのパッケージを入れることでHMRが出来るようになります。

webpack.config.js

続いてWebpackの設定です。

var webpack = require('webpack')

module.exports = {
  entry: './js/app.js',
  output: {
    path: "dist",
    publicPath: 'dist',
    filename: 'bundle.js',
  },
  devtool: 'inline-source-map',
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['es2015']
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue'
      }
    ]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

大事なのはoutputの項目にpublicPathを足すことと、pluginsの項目にHotModuleReplacementPluginを追加していることです。

JSコード

コンポーネントとエントリポイントのコードです。

my_component.vue
<template>
  <div>
    <h2>{{ message }}</h2>
  </div>
</template>

<script>
  module.exports = {
    data() {
      return {
        message: 'hot reload hoge  aa'
      }
    }
  }
</script>

<style lang="sass">
</style>
app.js
var Vue = require('vue/dist/vue.js')
var myComponent = require('./components/my_components.vue')

var vm = new Vue({
  el: ".app",
  components: {
    'my-component': myComponent
  }
})

ここで気をつけないといけないのが、Vue.jsをrequireしている所で、

require('vue')

としないことです。依存関係の都合らしく、HMRをしたい場合は上記のコードのようにしないといけないようです。

動かしてみる

実際に動かしてみます。下記のコマンドで実行してみます。

% webpack-dev-server --inline --hot

vue-hot-reload.gif

リロードしないで更新されていることがわかります。

おわりに

簡単ですがVue.jsでHMRをやるサンプルを作成しました。これでVue.jsでの開発が楽しくなりそうです。

サンプルはGitHubで公開しています。もっとこうしたほうが良いというようなことがあればプルリクをお願いします。

nasum/vue-hot-reload

参考記事

Hot Module Replacementの設定と仕組みを理解する
webpack-dev-server を使う

25
Help us understand the problem. What is going on with this article?
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
nasum
golangとReactでお仕事をしているWebアプリケーションエンジニア。 terraformとかdockerも触れます。 いろいろ作りたい。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
25
Help us understand the problem. What is going on with this article?