https://okamuuu.hatenablog.com/entry/2016/07/01/101856

ready

mkdir pracitcie-x-tag && ce $_
npm init --yes
npm install --save x-tag
npm install --save-dev webpack webpack-dev-server

add: entry.js

const xtag = require('x-tag');
xtag.register('x-clock', {
  lifecycle: {
    created: function(){
      this.start();
    }   
  },  
  methods: {
    start: function(){
      this.update();
      this.xtag.interval = setInterval(this.update.bind(this), 1000);
    },  
    stop: function(){
      this.xtag.interval = clearInterval(this.xtag.interval);
    },  
    update: function(){
      this.textContent = new Date().toLocaleTimeString();
    }   
  },  
  events: {
    tap: function(){
      if (this.xtag.interval) this.stop();
      else this.start();
    }   
  }
});

add index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
<x-clock />
</html>

add: webpack.config.js

module.exports = { 
  entry: "./entry.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  }
};

run

% $(npm bin)/webpack-dev-server

open

% open http://localhost:8080/webpack-dev-server/

おしまい