实现webpack的实时打包构建
1. 由于每次重新修改代码之后,都需要手动运行webpack打包的命令,比较麻烦,所以使用`webpack-dev-server`来实现代码实时打包编译,当修改代码之后,会自动进行打包构建。
2. 运行`cnpm i webpack-dev-server --save-dev`安装到开发依赖
3. 安装完成之后,在命令行直接运行`webpack-dev-server`来进行打包,发现报错,此时需要借助于`package.json`文件中的指令,来进行运行`webpack-dev-server`命令,在`scripts`节点下新增`"dev": "webpack-dev-server"`指令,发现可以进行实时打包,但是dist目录下并没有生成`bundle.js`文件,这是因为`webpack-dev-server`将打包好的文件放在了内存中
+ 把`bundle.js`放在内存中的好处是:由于需要实时打包编译,所以放在内存中速度会非常快
+ 这个时候访问webpack-dev-server启动的`http://localhost:8080/`网站,发现是一个文件夹的面板,需要点击到src目录下,才能打开我们的index首页,此时引用不到bundle.js文件,需要修改index.html中script的src属性为:`<script src="../bundle.js"></script>`
+ 为了能在访问`http://localhost:8080/`的时候直接访问到index首页,可以使用`--contentBase src`指令来修改dev指令,指定启动的根目录:
```
"dev": "webpack-dev-server --contentBase src"
```
同时修改index页面中script的src属性为`<script src="bundle.js"></script>`
最新文章
- ssh学习小记
- 使用Fluent API 配置/映射属性和类型
- 解决Linux CentOS中cp -f 复制强制覆盖的命令无效的方法
- centos7 拨号之后添加路由
- Team Foundation Server
- ServerSocketChannel实现多Selector高并发server
- Intent.ACTION_TIME_TICK 广播
- [Leetcode][Python]41: First Missing Positive
- 对于ASP.NET MVC中页面强类型的个人理解
- LWIP之ARP协议
- Android-finished with non-zero exit value 2
- Unity3D手机斗地主游戏开发实战(02)_叫地主功能实现
- Python连接Mssql
- js 图片区域可点击,适配移动端,图片大小随意改变
- Java秒杀简单设计一:搭建springboot环境
- iOS 开发 Framework
- js函数预编译
- [label][翻译][JavaScript-Translation]七个步骤让你写出更好的JavaScript代码
- Android Bug BaseExpandableListAdapter, getChildView
- DAVY的神龙帕夫——读者的心灵故事|十二橄榄枝的传说
热门文章
- week4 作业
- [UPC10525]:Dove打扑克(暴力+模拟)
- 五大 JAVA Web 框架的优缺点对比,Spring MVC 领先
- 关于MySQL去除查询结果重复值
- SQL server 从创建数据库到查询数据的简单操作
- 第一次试验报告&;学习总结
- httpd启动显示Could not reliably determine the server&#39;s fully qualified domain name, using 127.0.0.1. Set the &#39;ServerName&#39;
- python使用相对路径创建文件夹
- 【MM系列】SAP MM模块-MIGO收货后自动打印收货单
- Java第二周总结