webpack4：实时打包之webpack-dev-server
Posted Samve
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack4：实时打包之webpack-dev-server相关的知识，希望对你有一定的参考价值。
1、安装：
cnpm i webpack-dev-server -D
2、package.json中配置命令：
"dev": "webpack-dev-server --open chrome --port 3000 --hot --host 127.0.0.1"{
"name": "wp4-1",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"dev": "webpack-dev-server --open chrome --port 3000 --hot --host 127.0.0.1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.10.1"
}
}
3、运行命令打包“npm run dev”
说明：webpack-dev-server实时打包好的main.js是托管在内存中，所以在项目根目录中看不到，但是我们可以认为在项目根目录中有一个看不见的main.js。
4、http://127.0.0.1:3000/src/预览index.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../main.js"></script>
</head>
<body>
<h1>首页</h1>
</body>
</html>以上是关于webpack4：实时打包之webpack-dev-server的主要内容，如果未能解决你的问题，请参考以下文章