10.webpack-配置webpack的自动打包功能

webpack
webpack 可以打包项目用到的js和非js文件 但是每次修改 都需要手动执行打包命令 然后刷新浏览器页面 比较麻烦

webpack-dev-server
实现了项目自动打包功能 每次修改文件 会自动打包并生成 bundle.js (mian.js) 文件 然后刷新浏览器页面

1. 安装 webpack-dev-server

npm i -D webpack-dev-server

2. 修改启动配置

打开 package.json 修改 scripts 下的 dev 为 webpack-dev-server

"dev": "webpack-dev-server" // 这里是修改dev 不是添加一个dev

3. 修改 index.html 的引用路径

webpack-dev-server 会把打包的js文件保存在内存中 使用 /bundle.js 来访问

修改 index.html 的 js脚本引用 路径

<!-- <script type="text/javascript" src="../dist/bundle.js"></script> -->
<script type="text/javascript" src="/bundle.js"></script>

4. 运行 webpack-dev-server

npm run dev

光标在这里一闪一闪的 说明服务器在工作 这是正常的 不要关闭cmd窗口 或者结束webpack-dev-server 需要执行其他命令的时候 就在文件夹地址栏中输入cmd回车 重新打开一个cmd窗口

5. 查看 bundle.js

bundel.js 文件并不在硬盘上 而是在内存中 通过 http://localhost:8080/bundle.js 就可以访问到

6. 浏览器访问

http://localhost:8080

7. 预览效果

8. 修改代码

9. 浏览器会自动刷新页面

• 点赞
• 收藏
• 分享
• 文章举报