es6+canvas+webpack+babel编译实现简单打字游戏

之前用es5和canvas写过打字游戏，今天为了增强对es6理解以及webpack环境配置，决定重新对以前代码进行模块化开发。

由于有些简单，就直接上

目录结构

项目依赖

{
  "name": "typing",
  "version": "1.0.0",
  "description": "es6 typingGame",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },
  "author": "miao",
  "license": "ISC",
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "css-loader": "^0.28.10",
    "extract-text-webpack-plugin": "^3.0.2",
    "less": "^3.0.1",
    "less-loader": "^4.1.0",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.7",
    "style-loader": "^0.20.3",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.11"
  }
}

webpack编译配置，使用babel转译为es5，里面的一些依赖配置这个打字游戏没用上，只用到babel编译。入口文件是src/js/main.js输出文件是out/index.js

var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
    devtool: 'eval-source-map',
    entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname, 'out'),
        publicPath: './out/',
        // publicPath: 'https://github.com/paysonTsung/Fighter/out',
        filename: 'index.js'