之前用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'