码迷,mamicode.com
首页 > Web开发 > 详细

webpack4:实时打包之webpack-dev-server

时间:2020-02-19 17:12:43      阅读:117      评论:0      收藏:0      [点我收藏+]

标签:port   splay   说明   lan   reset   lock   asc   aaaaaa   配置   

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

标签:port   splay   说明   lan   reset   lock   asc   aaaaaa   配置   

原文地址:https://www.cnblogs.com/samve/p/12331684.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!