Vue学习【第四篇】：Vue 之webpack打包工具的使用
什么是webpack
webpack是一个模块打包工具。
用vue项目来举例：浏览器它是只认识js，不认识vue的。而我们写的代码后缀大多是.vue的，在每个.vue文件中都可能html、js、css甚至是图片资源；并且由于组件化，这些.vue文件之间还有错综复杂的关系。所以项目要被浏览器识别，我们就要使用webpack将它们打包成js文件以及相应的资源文件。
webpack的功能#
1 2 3 4 | 它可以吧CSS，JS图片当做模块来处理它可以吧以上的这些文件进行打包压缩成一个JS文件，减少了HTTP的请求根据模块之间的依赖关系进行分析，按需加载可以安装一些插件，对插件进行打包处理 |
安装#
npm install webpack -g(全局的安装)
webpack -v #查看是否安装成功
打包的方式：
手动打包：
a.js webpack a.js /test/a2.js
自动打包
简单使用#
这里我们来理解下webpack是如何打包的
app/a.js
var tcl = "this is webpack test"; console.log(tcl);
require('style-loader!css-loader!./a.css');
执行命令
webpack app/a.js public/b.js 、//意思是吧app下的a.js打包在public下的b.js
就会自动生成一个b.js的文件，现在就可以使用并导入了
1 2 3 4 5 6 7 8 9 10 11 12 13 | <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div> this is div test </div> <script src="bundle.js"></script></body></html> |
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架