本篇文章工程基础为webpack4.X创建工程
webpack-dev-server
webpack-dev-server：一个服务器插件，相当于webpack+apache，启动一个web服务并实时更新修改,启动webpack-dev-server后，在目标文件夹中是看不到编译后的文件的，实时编译后的文件都保存到了内存当中。
webpack-dev-server的使用
安装
cnpm i webpack-dev-server -D
在package.json里添加
"dev":"webpack-dev-server"
添加完成后如下
{
"name": "webpackBase",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server"
},
"keywords": [],
"author": "",
"license": "ISC"
}
起动命令
npm run dev
启动后见日志
image.png
日志中标明了访问路径以及输出的缓存路径
修改index.js的应用js文件为缓存中的main.js，如下:
<html>
<head>
<title>learn</title>
<script src ="/main.js"></script>
</head>
<body>
<p>webpack4.xLearn</p>
</body>
这样就完成webpack-dev-server的启动
image.png
