当前位置: 首页 > news >正文

Vue学习笔记之Webpack介绍

 

在这里我仅仅的是对webpack做个讲解,webpack这个工具非常强大,解决了我们前端很繁琐的一些工具流程繁琐的事情。如果感兴趣的同学,简易还是看官网吧。

中文链接地址:https://www.webpackjs.com/

 

0x00 为什么要使用Webpack

现今的很多网页其实可以看做是功能丰富的应用,它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度,前端社区涌现出了很多好的实践方法

  • 模块化,让我们可以把复杂的程序细化为小的文件;
  • 类似于TypeScript这种在JavaScript基础上拓展的开发语言:使我们能够实现目前版本的JavaScript不能直接使用的特性,并且之后还能转换为JavaScript文件使浏览器可以识别;
  • Scss,less等CSS预处理器
  • ...

这些改进确实大大的提高了我们的开发效率,但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的,这就为WebPack类的工具的出现提供了需求。

 

0x01 什么是webpack

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其转换和打包为合适的格式供浏览器使用。

 

官网的一张图,你是否能看明白呢?

中间那个是webpack的图标,可以看作webpack这个工具。左边是我们项目生产环境下所以来的包,通过这个webpack工具我们可以打包所有的图片,所以的脚本,所有的样式等等,最后打包成了右边的静态资源文件。

注意了:每个webpack的版本都有不同的功能,而且高版本的webpack可能会出现意想不到的bug,在这里推荐大家使用2版本的webpack。

另外webpack还支持我们的模块化加载。在之前的学习可没有这个功能哦!这让我们更加快速的开发。

 

转载于:https://www.cnblogs.com/JetpropelledSnake/p/9450847.html

相关文章:

  • 第一次python词云尝试
  • 论优越感
  • 【院校巡礼】em兰州大学/em - 叁研良语的文章 - 知乎
  • μC/OS-III 概述
  • centos6.5使用yum安装redis 设置开机启动
  • 初识设计模式(建造者模式)
  • 支付系统整体架构
  • Sketch 介绍
  • 简单的自创线程池
  • python网络编程三次握手和四次挥手
  • javascript基础知识(4) 字符串
  • C语言讨论象棋将帅问题,代码短又美!
  • python存储json文件
  • 6.0 实现app登录
  • socket编程-tcp
  • [NodeJS] 关于Buffer
  • 230. Kth Smallest Element in a BST
  • Java,console输出实时的转向GUI textbox
  • jquery ajax学习笔记
  • MQ框架的比较
  • mysql中InnoDB引擎中页的概念
  • nodejs实现webservice问题总结
  • SegmentFault 技术周刊 Vol.27 - Git 学习宝典:程序员走江湖必备
  • vue自定义指令实现v-tap插件
  • 编写符合Python风格的对象
  • 翻译--Thinking in React
  • 两列自适应布局方案整理
  • 如何使用 OAuth 2.0 将 LinkedIn 集成入 iOS 应用
  • 如何使用Mybatis第三方插件--PageHelper实现分页操作
  • 什么软件可以提取视频中的音频制作成手机铃声
  • 实现菜单下拉伸展折叠效果demo
  • 微信公众号开发小记——5.python微信红包
  • 小试R空间处理新库sf
  • Java性能优化之JVM GC(垃圾回收机制)
  • 进程与线程(三)——进程/线程间通信
  • #Ubuntu(修改root信息)
  • (52)只出现一次的数字III
  • (poj1.3.2)1791(构造法模拟)
  • (pojstep1.3.1)1017(构造法模拟)
  • (超详细)语音信号处理之特征提取
  • (二十四)Flask之flask-session组件
  • (十)DDRC架构组成、效率Efficiency及功能实现
  • (十八)用JAVA编写MP3解码器——迷你播放器
  • (转)C#开发微信门户及应用(1)--开始使用微信接口
  • (转)c++ std::pair 与 std::make
  • .net core控制台应用程序初识
  • .NET Remoting学习笔记(三)信道
  • .NET 编写一个可以异步等待循环中任何一个部分的 Awaiter
  • .NET 跨平台图形库 SkiaSharp 基础应用
  • .NET/C# 使窗口永不获得焦点
  • .NET/C# 在代码中测量代码执行耗时的建议(比较系统性能计数器和系统时间)...
  • .net最好用的JSON类Newtonsoft.Json获取多级数据SelectToken
  • /usr/bin/perl:bad interpreter:No such file or directory 的解决办法
  • [<死锁专题>]
  • [acwing周赛复盘] 第 94 场周赛20230311