Vue.js에서 Hot Module Replace ement를 만들어 봤어요.

개시하다

요즘js의 2.0이 발표되었습니다.2.0이 되면서 여러 가지 일이 달라졌는데 HMR이 될 수 있다는 게 제일 마음에 걸렸어요.
이번에는 베입니다.나는 js로 HMR 샘플을 만들었다.

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-api와 webpack-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를더하여plugens항목에 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.jsrequire의 곳입니다.

require('vue')

그러지 마.의존관계인 것 같은데 HMR을 하려면 위 코드처럼 해야 한다.

시험해 보다

실기 한번 돌려봐.다음 명령으로 실행해 보세요.

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

재부팅 없이 업데이트되었음을 알 수 있습니다.

끝말

간단하지만 Vue입니다.나는 js로 HMR 샘플을 만들었다.이렇게 Vue.js의 개발은 매우 재미있게 변할 것이다.
샘플은 GiitHub에서 공개됩니다.이렇게 더 좋은 일이 있으면 저를 찾아주세요.
nasum/vue-hot-reload

참고 문장

Hot Module Replace ement의 설정 및 구조 이해
웹 팩-dev-server 사용