03webpack借助webpack-dev-server 时时跟新的第一种方式
2023-09-27 14:22:21 时间
<!-- 如何添加npm run dev 启动程序 下载 npm install --save-dev webpack-dev-server
下载 npm i webpack-cli -D
说明一下:
--save-dev等价为-D 意思是安装到开发环境中去;
也就是package.json中的 devDependencies这个下面
在pack.json中添加 "dev": "webpack-dev-server"这一句 注意使用逗号隔开
{
"devDependencies": {
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
},
"scripts": {
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
},
"dependencies": {
"jquery": "^3.5.1"
}
}
本节实现的功能==》手动修改成自己想要的端口号 2并且自动打开浏览器哦 在package.json中修改 将“script”:{ "dev":"webpack-dev-server --open --port 3000"} 解释==》 --open是自动打开浏览器 --port 3000将端口修改为3000 --> <!-- 本节实现的功能==》 我们发现启动之后展示的不是一个具体的首页 而是一个目录 如何解决启动之后是一个具体的首页 将“scripts”:{ "dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"} 这里有4个指令 解释==》 --open是自动打开浏览器 --port 3000将端口修改为3000 --contentBase src 以src为根目录 展示它里面的index.html这个文件 --hot实现局部的跟新 你修改了哪里就跟新哪里 效率跟高了 它能够实现网页不重载(那个圈圈不会刷新) 就可以实现页面跟新 -->
启动的命令是npm run dev
src目录下的webpack.config.js
const path = require("path");
module.exports = {
entry: path.join(__dirname, "./src/main.js"), //入口文件 使用webpack要打包哪一个文件
output: {
//输出相关的配置
path: path.join(__dirname, "./dist"), //指定打包好的文件会输出到哪一个目录(dist)下去
filename: "testindex.js", //指定打包好的文件的名称叫什么名字
},
};
src目录下的index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="/testindex.js"></script> </head> <body> <div>12</div> <div>222</div> <div>222</div> </body> </html>
相关文章
- ubuntu server 18.04的安装 以及配置网络还有ssh服务
- flask-sqlalchemy中Datetime的创建时间、修改时间,default,server_default,onupdate
- Docker宣布支持Windows 10和Azure Windows Server
- SQL Server – 我常用语句
- Windows Server 2008更改SID
- [Linux/Apache Http]Apache Http(d)服务访问时报: 403 Forbidden You don't have permission to access /cdh/ on this server.
- Mysql导入Sql文件时报Error Code: 2013 - Lost connection to MySQL server during query
- can't connect to mysql server on localhost <10061>
- SQL Server内存理解的误区
- visualSVN server库迁移