Appearance
搭建开发环境
初始化 npm 环境
npm init -y
mkdir src
cd src
touch index.js
1
2
3
4
2
3
4
可以在 index.js 随便写一点什么
javascript
console.log(1)
1
安装 webpack
npm install webpack webpack-cli --save-dev
touch webpack.dev.config.js
1
2
2
配置 config.js
javascript
module.exports = {
entry: "./src/index.js",
output: {
path: __dirname,
filename: "./dist/bundle.js", // dist 会自动创建
}
}
1
2
3
4
5
6
7
2
3
4
5
6
7
配置 packjson
json
"build:dev": "webpack --config ./webpack.dev.config.js --mode development"
1
安装 webpack-dev-server
touch index.html
1
// config.js
javascript
const path = require("path");
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: "./index.html", // bundle.js 会自动注入
}),
],
devServer: {
static: {
directory: path.join(__dirname, "dist"), // 根目录
},
open: true, // 自动打开浏览器
port: 9000, // 端口
proxy: {
"/api/*": {
target: "http://localhost:8880",
},
},
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// package.json
javascript
"dev": "webpack-dev-server --config ./webpack.dev.config.js --mode development",
1
安装 babel
.babelrc
"@babel/core": "^7.20.5",
"@babel/preset-env": "^7.20.2",
"babel-loader": "^9.1.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5"
1
2
3
4
2
3
4
json
{
"presets": [
[
"@babel/preset-env",
{
"useBuiltIns": "entry"
}
]
],
"plugins": ["transform-decorators-legacy"]
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
javascript
module.exports = {
module: {
rules: [
{
test: /\.js?$/,
exclude: /(node_modules)/,
loader: "babel-loader",
},
],
},
}
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11