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文件：

    
    
    
    
    


    
首页