webpack5 webpack-cli4

webpack5+webpack-cli4基础搭建

我用到的版本webpack: "5.72.1，webpack-cli:“4.9.2”

1. 安装webpack+webpack-cli
   npm install webpack webpack-cli
2. 在文件夹中创建webpack.config.js.
   其实webpack5把entry和output自动封装只需要配置devServer就好了，配置内容如下

module.exports={
 //entry自动封装在src文件下的index.js，output封装为main.jsdevServer:{port:8090,//新建public文件夹，当项目启动时访问的地址为8090，内容为public文件夹下的index.html，如果不配置就会显示Cannot GET /static: {directory: "./public",},}
 }	
 

3. 文件内容展示如下

//public文件夹下html内容如下
 
 
 
 
 1111
 
 
 
 //src文件夹下index.js
 alert(111)
 

4. 内容展示
   
5. 配置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"}
 }
 

6. 启动项目npm run dev