webpack5+webpack-cli4基础搭建
我用到的版本webpack: "5.72.1,webpack-cli:“4.9.2”
- 安装webpack+webpack-cli
npm install webpack webpack-cli - 在文件夹中创建webpack.config.js.
其实webpack5把entry和output自动封装只需要配置devServer就好了,配置内容如下
module.exports={
//entry自动封装在src文件下的index.js,output封装为main.js
devServer:{
port:8090,
//新建public文件夹,当项目启动时访问的地址为8090,内容为public文件夹下的index.html,如果不配置就会显示Cannot GET /
static: {
directory: "./public",
},
}
}
- 文件内容展示如下
//public文件夹下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>Document</title>
</head>
<body>
1111
</body>
<script src="main.js" type="text/javascript"></script>
</html>
//src文件夹下index.js
alert(111)
- 内容展示
- 配置package.json
{
"name": "snabbdom",
"version": "1.0.0",
"description": "",
"main": "index.js",
//将scripts内容添加 "dev":"webpack-dev-server"
"scripts": {
"dev":"webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"snabbdom": "^3.5.0"
},
"devDependencies": {
"webpack": "^5.72.1",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.9.0"
}
}
- 启动项目npm run dev