首先我们回顾一下webpack知识点,我重新新建了文件夹并--save-dev安装了webpack与webpack-cli
![](https://img.haomeiwen.com/i14714949/7ec5ca410a8c6fc4.png)
这步骤就不演示了,然后快速配置初始化webpack
![](https://img.haomeiwen.com/i14714949/1b2bf185df220ff3.png)
并在index.html中引入dist下的 index.js,此时没有生成,打包的时候就可以看到了,注意这里是两条下划线__,图上面是不对的
在app下的index.js中随意写个方法
![](https://img.haomeiwen.com/i14714949/7a7c4760f23f75aa.png)
接着我们使用webpack --mode production/development 成功打包
页面也显示了js的内容
![](https://img.haomeiwen.com/i14714949/45150b97096d92f4.png)
接下来配置一下服务器,先安装webpack-server cnpm i -D webpack-dev-server
![](https://img.haomeiwen.com/i14714949/57ff41a80c68167a.png)
![](https://img.haomeiwen.com/i14714949/71a3ff1e80857edc.png)
现在我们运行npm run start即可,那此时是没办法热更新的,因为我们html引入的是打包之后的js
如果要自动更新,给予一个缓存目录
![](https://img.haomeiwen.com/i14714949/55cde89ecb9dd936.png)
![](https://img.haomeiwen.com/i14714949/d0c8e5a867911413.png)
这个目录不需要在目录下创建,不改变即可,这样就可以了
网友评论