- 学习的内容如下
- 开始
- 当我们需要频繁的修改main.js
- 我们每次都需要去构建，这样显得很麻烦，webpack .\src\main.js -o .\dist\bundle.js，通过配置文件去配置每次的打包入口和出口
- 1、创建webpack.config.js
- 当我们在控制台直接输入webpack命令执行的时候，webpack做了几个步骤
- 1、没有使用webpack 指定入口和出口
- 2、webpack 就会去项目中的根目录中，找一个webpack.config.js的配置文件
- 3、当找到了这个配置文件后，webpack就回去执行这个配置文件，解析执行完配置文件后，就得到了配置文件，导出配置对象
- 4、当webpack拿到配置对象了，就拿到了配置文件中入口和出口，然后进行打包和构建
- 使用webpack-dev-server工具实现自动的打包编译的功能
- 1、运行npm i webpack -dev -server -D安装工具
- 2、用法和webpack一样
- 3、由于在本地安装的，所以无法使用脚本命令，只能安装到全局-g才能正常的使用
- 4、脚本命令
- 在pcakage.json中添加"dev": "webpack-dev-server"
- 5、然后就可以在终端输入命令npm run dev
h:\20190305\code\webpack>npm run dev
> yes@1.0.0 dev h:\20190305\code\webpack
> webpack-dev-server
i ?wds?: Project is running at http://localhost:8080/
i ?wds?: webpack output is served from /
i ?wdm?: Hash: 8b5966bb4652f34f42c7
Version: webpack 4.30.0
- 6、打开本地浏览器 http://localhost:8080/，然后就可以看到,说明打包成功了
- 7、注意点，当我们改变main.js中的内容，并且保存的时候，我们就可以自动的打包
- 8、webpack-dev-server帮我们打包生成的bundle.js文件，并没有存放到磁盘上，而是在电脑的内存中
- 打开根路径的bundle，打包成的服务器的地址，项目中找不到，但是可以自动打包
<!-- webpack-dev-server帮我们打包生成的bundle.js文件，并没有存放到磁盘上，而是在电脑的内存中 -->
<script src="/bundle.js"></script>
- 9、可以认为这个webpack-dev-server工具，以一种虚拟的形式托管到了项目的根目录中，虽然看不到，但是可以认为和dist 平级的文件，为啥是这样做呢，原因就是快。速度快
- webpack-dev-server工具常用的参数一
配置端口号和自动打开浏览器："dev": "webpack-dev-server --open --port 3000"
- --contentBase src 可以自动的打开 index.html的文件，而不用去重新选择 src
- --hot 可以实现浏览器无刷新的重载，修改完样式，页面根本没有刷新，但是能够重新加载最新的代码
- ·"dev": "webpack-dev-server --open --port 3001 --contentBase src --hot"
- 完整的结果
- webpack-dev-server工具常用的参数二
- 这样配置和上面的效果一样