第四十八篇:webpack的基本使用(二)
2022/1/3 6:09:33
本文主要是介绍第四十八篇:webpack的基本使用(二),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
好家伙,
1.webpack中的默认约定
默认的打包入口文件为src -->index.js
默认的输出文件路径为dist -->main.js
既然有默认,那么就说明肯定能改
2.entry和output
在webpack.config.js配置文件中,
通过entry节点指定打包的入口。
通过output节点指定打包的出口。
示例代码如下:
const path = require('path')// 导入 node.js 中专门操作路径的模块,这里的path是node的一个模块 module.exports ={ entry: path.join(_dirname, './src/index.js'),// 打包入口文件的路径 output:{ path: path.join(_dirname, './dist'), // 输出文件的存放路径,这里的path是一个属性 filename: 'bundle.js'//输出文件的名称 } }
3.webpack 插件安装
现在问题来了
如果我要改index.js中的内容(就算只是改一两行代码),也必须改完内容后保存,再打包,
多次更改下来,显得整个过程显得非常繁琐
有没有什么好的解决办法?
使用webpack插件
3.1.安装方法:
终端跑一下啦:
npm install webpack-dev-server@3.11.2 -D
3.2.webpack 插件的作用
通过安装和配置第三方的插件,可以拓展webpack的能力,从而让webpack用起来更方便。
3.3.最常用的webpack插件有如下两个:
① webpack-dev-servert
类似于node.js 阶段用到的 nodemon 工具
每当修改了源代码,webpack会自动进行项目的打包和构建
② html-webpack-plugin
webpack中的HTML插件(类似于一个模板引擎插件)
可以通过此插件自定制 index.html页面的内容
4.配置webpack-dev-server
① 修改 package.json->scripts 中的dev 命令,如下:
"scripts": { "dev": "webpack serve", // script 节点下的脚本,可以通过 npm run 执行 }
②再次运行npm run dev 命令,重新进行项目的打包
③在浏览器中访问 http://localhost:8080地址,查看自动打包效果
(出现了!!出现了!!是"http://localhost:8080"!!!)
注意:webpack-dev-server 会启动一个实时打包的 http 服务器
(像之前写vue项目一样,ctrl+s一次他就更新一次,终端处于监视的状态,监视代码的更新)
于是就解决每次修改代码都需要重新打包的问题了
That's all
溜了溜了
"黑马程序员"NB
这篇关于第四十八篇:webpack的基本使用(二)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-06Package Easy(基于 NSIS 的打包exe安装包工具)使用方法-icode9专业技术文章分享
- 2024-06-06基于 casdoor 的 ELK 开源登录认证解决方案: elk-auth-casdoor-icode9专业技术文章分享
- 2024-05-29Elasticsearch慢查询日志配置
- 2024-05-29揭秘华为如此多成功项目的产品关键——Charter模板
- 2024-05-29海外IDC业务拓展的7大挑战
- 2024-05-29InLine Chat功能优化对标Github Copilot,CodeGeeX带来更高效、更直观的编程体验!
- 2024-05-29CodeGeeX 智能编程助手 6 项功能升级,在Visual Studio插件市场霸榜2周!
- 2024-05-29AutoMQ 生态集成 Apache Doris
- 2024-05-292024年IDC行业的深度挖掘:机遇、挑战与未来展望
- 2024-05-29五款扩展组件齐发 —— Volcano、Keda、Crane-scheduler 等,邀你体验