使用webpack-dev-server自动编译的功能

3.png

1.安装webpack-dev-server
npm i webpack-dev-server -D // 把这个工具安装在本地（项目安装）

2.修改package.json文件

...
 "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
// 加入这一行 直接在命令行执行 npm run dev即可运行
    "dev": "webpack-dev-server"
// 加上参数 --open 自动打开浏览器
// "dev": "webpack-dev-server --open"
//指定端口
// "dev": "webpack-dev-server --open --port 9999"
// 指定打开根目录 
// "dev": "webpack-dev-server --open --port 9999 --contentBase src --hot"
  },

...

3. npm i webpack -D // 在本地项目把webpack重新安装一遍

4. 把导入的js改为根目录导入

<script src="../dist/bundle.js"></script>
改为
<script src="/bundle.js"></script>

运行 npm run dev