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

实现webpack的实时打包构建

时间:2019-08-26 15:17:42      阅读:107      评论:0      收藏:0      [点我收藏+]

标签:打包   根目录   ase   webpack   文件   scripts   --   content   ntb   

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>`

实现webpack的实时打包构建

标签:打包   根目录   ase   webpack   文件   scripts   --   content   ntb   

原文地址:https://www.cnblogs.com/sylys/p/11412284.html

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