需要的插件
npm i -D webpack webpack-cli webpack-dev-server typescript ts-loader clean-webpack-plugin html-webpack-plugin
npm i -D @babel/core @babel/preset-env babel-loader core-js
npm i -D less less-loader css-loader style-loader
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>贪食蛇</title>
</head>
<body>
<div class="Interface">
<div class="move">
<!-- 设置蛇 -->
<div id="snake">
<div>
</div>
</div>
<!-- 设置食物 -->
<div id="food">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<br>
<div class="message">
<div id="SCORE">
SCORE:0
</div>
<div id="level">
Level:1
</div>
</div>
</div>
</body>
</html>
<script src="./index.js"></script>
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
optimization: {
minimize: false // 关闭代码压缩，可选
},
mode: 'development',
entry: "./src/index.ts",
devtool: "inline-source-map",
devServer: {
static: {
directory: path.join(__dirname, './dist'),
},
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "bundle.js",
environment: {
arrowFunction: false // 关闭webpack的箭头函数，可选
}
},
resolve: {
extensions: [".ts", ".js"]
},
module: {
rules: [
{
test: /\.ts$/,
use: [
{
loader: "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
"targets": {
"chrome": "58",
"ie": "11"
},
"corejs": "3",
"useBuiltIns": "usage"
}
]
]
}
},
{
loader: "ts-loader",
}
],
exclude: /node_modules/
},
{
//设置less文件的处理
test:/\.less$/,
use:[
"style-loader",
"css-loader",
{
loader:"postcss-loader",
options:{
postcssOptions:{
plugins:[
[
"postcss-preset-env",
{
browsers:'last 2 versions'
}
]
]
}
}
},
"less-loader"
]
}
]
},
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
title: '贪食蛇',
template:"./src/index.html"
}),
]
}
tsconfig.json
{
"include": [
"src/**/*"
],
"exclude": [
"node_modules"
],
"compilerOptions": {
"target": "ES2015",
"module": "ES2015",
}
}
package.json 的scripts
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --mode production",
"start": "webpack serve "
},
index.less
body{
background-color: rgb(240, 220, 236);
display: flex;
}
.Interface{
width: 35%;
height: 550px;
border: 6px solid black;
margin-left: 30%;
margin-top: 50px;
border-radius: 20px;
}
.move{
width: 90%;
height: 400px;
margin: 27px 241px 107px 24px;
border: 1px solid black;
position: relative;
}
#SCORE {
font-size: 25px;
margin: 20px 60px;
}
#level{
font-size: 25px;
margin: 20px 60px;
}
.message{
margin-top: -108px;
display: flex;
justify-content: space-between;
}
#snake{
width: 10px;
height: 10px;
background-color: rgb(2, 2, 2);
border: 1px solid rgb(240, 220, 236);
position: absolute;
}
#food{
width: 10px;
height: 10px;
border: 1px solid rgb(240, 220, 236);
position: absolute;
left: 50px;
top: 50px;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-content: space-between;
&>div{
width: 4px;
height: 4px;
background-color: rgb(218, 19, 95);
transform: rotate(45deg);
}
}
