编程导航会员会员
登录/注册

WebPack学习

webpack是Vue中涉及的一个知识点。现在项目多使用vite来代替webpack（在伙伴匹配项目中涉及到vite的使用）

webpack的定义

webPack是一个模块加载器兼打包工具。他可以把各种资源（JS JSX ES6 图片） 作为模块来处理和使用

安装webPack

  1. 安装打包工具： npm install webpack -g
  2. 安装客户端: npm install webpack-cli -g
  3. 测试是否安装成功： webpack -v , webpack-cli -v

项目练习

webpack的使用步骤如下：

  1. 创建一个项目
  2. 创建一个叫modules的目录，用于放置JS模块等资源文件
  3. 在modules下创建模块文件，如hello.js 用于编写JS模块相关的代码
▼
text
复制代码
//暴露一个方法：sayHello:
exports.sayHello=function(){
   document.write("<h1>Vue基础笔记</h1>");
}
  1. 在modules下创建一个名字叫main.js的入口文件，用于打包时设置entry属性
▼
text
复制代码
// require 导入一个模块，就可以调用这个模块中的方法了
var hello = require("/hello");
hello.sayHello();```
  1. 在项目目录下创建webpack.config.js 配置文件，使用webpack命令打包（如果显示未找到webpack则以管理员身份运行webpack）
▼
text
复制代码
module.exports={
 //进入路径  
  entry: "./modules/main.js",
 // 输出路径 
  output: {
    filename: "./js/budle.js"
  }
}
  1. 在项目目录下创建HTML页面，如index.html, 导入webPack打包后的JS文件
▼
text
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue学习</title>
</head>
<body>
<!--通过html文件就可以直接运行打包后的文件了-->
<script src="dist/js/bundle.js"></script>
</body>
</html>
  1. 运行HTML查看效果
  2. 最终效果的得到的感悟： 可以将打包后的js文件通过html启动，然后直接运行
  3. 补充： 参数 --watch用于监听变化 :webpack --watch

背了5个新单词，复习了6个单词 周一作业已补完

学习打卡
学习总结
0个评论
全部评论
点击登录，快来和大家讨论吧～
表情
图片
暂无评论
守望
守望
等级vip
内容推荐
更多
Day 103✅ 今天做了：复习了多用户通信系统⏰ 明天计划：学习Java反射
1
Day 68时间19:00~ 22:00(3h)✅ 今天做了：Component注解、Mybatis配置、使用⏰ 明天计划：Lombok、Mapper映射、动态SQL📚 今日感悟：自动配置类DataSourceAutoConfiguration ，会读取properties文件，通过注解：@EnableConfigurationProperties(DataSourceProperties.cl
2
Day 19✅ 今天做了：MCP⏰ 明天计划：AI智能体构建📚 今日感悟：今天MCP问题有点多有点杂，明天找时间再捋一下。继续加油
1
Day 25✅ 今天做了：1、扇贝英语单词打卡2、英语听说读写、听力练习3、微信阅读15分钟4、编程导航学习⏰ 明天计划：待定📚 今日感悟：Keep going！
2
Day 104✅ 今天做了：学习了Java反射及快速入门⏰ 明天计划：继续学习Java反射
1
作者分享
更多
Day 1 ✅ 今天做了：学习了ai代码生成平台项目 ⏰ 明天计划：开始编写前四节课的代码 📚 今日感悟：抽空就要学一学
1
干了什么：复习了120道面试题目 明天：开始三阶段学习
1
1.学完了大模型微调知识 2.明天学习python知识 3.加油！
3
Day 25 ✅ 今天做了：ai面试120题 ⏰ 明天计划：背诵120题目 📚 今日感悟：加油，每天学习，坚持不懈
2
Day 1 ✅ 今天做了：传统的agent工作模式(链式调用)无法解决循环执行和条件判断执行的问题，所以推出了工作流。 工作流（图结构）由顶点和边构成。顶点就是一个执行任务，边就是任务的执行需要按照什么次序来进行。 技术实现：LangGraph和LangGraph4j 知识点 LangChain核心概念 1. StateGraph 与 AgentState 都是保存节点的数据信息和状态的 2. Node执行单元 3. Edge执行路径 4. 构建完整图 复杂控制流 1. 循环 2. 并行执行 3. 子图 CheckPoints 与 Breakpoints 1. checkPoint保存与恢复 2. BreakPoint 暂停与人工介入 3. 恢复执行 可视化与调用 1. 图可视化 2. LangGraph4j Studio LangGraph4j python版本 常见设计模式 1. 模式一：检索-评估--重试 2. 模式二：多源信息聚合 3. 模式三：审批工作流 ⏰ 明天计划：明天完成微调知识的复习 📚 今日感悟：加油，今年一定要找到高新工作！
2
下载 APP