(1)为什么要使用webpack?
1.在网页中有哪些常见的静态资源?
- Js:
- .js .jsx .coffee .ts
- Css:
- .css .less .sass .scss
- Images:
- .jpg .png .gif .bmp .svg
- 字体文件:
- .svg .ttf .eot .woff .woff2
- 模板文件:
- .ejs .jade .vue
2.网页中引入的静态资源多了以后有什么问题?
- 网页加载速度慢,因为我们要发起很多的二次请求
- 要处理错综复杂的依赖关系,比如引入bootstrap得引入jquery
3.如何解决上述两个问题(为什么要使用webpack):
- 合并、压缩、精灵图、图片的base64编码
- 可以只用之前学过的requireJs、也可以使用webpack可以解决各个包之间的复杂依赖关系
- 比如我们现在经常写一些.less的样式,但是你直接
<link rel="stylesheet" src="./index.less">
是无效的,因为浏览器并不能识别.less的文件。
4. 什么是webpack?
webpack是前端的一个项目构建工具,它是基于nodejs开发出来的一个前端工具。
5. 如何完美实现上述的两种解决方案?
- 使用Gulp,是基于task任务的
- 使用webpack,是基于整个项目进行构建的
- 借助于webpack这个前端自动化构建工具,可以完美实现资源的合并、打包、压缩、混淆等诸多功能。
6.webpack的安装
- 运行
npm install webpack -g
全局安装webpack,这样就能全局使用webpack命令了。 - 在项目根目录中运行
npm install webpack --save-dev
安装到项目依赖中
7.demo案例
需要全局引入webpack,在项目中npm install jquery --save
安装jquery。
小案列的目录结构
index.html代码:
main.js代码:
打包结果:
如上操作,引入通过webpack打包后的bundle.js文件,不需要在引入main.js文件了,也可实现相同效果。
(1)为什么要使用webpack?的更多相关文章
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- webpack之傻瓜式教程
接触webpack也有挺长一段时间了,公司的项目也是一直用着webpack在打包处理,但前几天在教新人的情况下,遇到了一个问题,那就是:尽管网上的webpack教程满天飞,但是却很难找到一个能让新人快 ...
- 细说前端自动化打包工具--webpack
背景 记得2004年的时候,互联网开发就是做网页,那时也没有前端和后端的区分,有时一个网站就是一些纯静态的html,通过链接组织在一起.用过Dreamweaver的都知道,做网页就像用word编辑文档 ...
- Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)
Webstorm+Webpack+echarts ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert
使用webstorm+webpack构建简单入门级"HelloWorld"的应用&&构建使用jquery来实现 1.首先你自己把webstorm安装完成. 请参考这 ...
- webpack入门教程之Hello webpack(一)
webpack入门教程系列为官网Tutorials的个人译文,旨在给予想要学习webpack的小伙伴一个另外的途径.如有不当之处,请大家指出. 看完入门教程系列后,你将会学习到如下内容: 1.如何安装 ...
- webpack的使用
1.webpack是什么? 打包前端项目的工具(为项目提高逼格的东西). 2.webpack的基本命令 webpack#最基本的启动webpack命令 webpack-w #提供watch方法,实时进 ...
- Webpack 配置摘要
open-browser-webpack-plugin 自动打开浏览器 html-webpack-plugin 通过 JS 生成 HTML webpack.optimize.UglifyJsPlugi ...
- Vue + Webpack + Vue-loader 系列教程(2)相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
随机推荐
- 解决Mac上打开txt文件乱码问题
出处:https://www.jianshu.com/p/f55ddf1e9839 经常会在Mac上打开一个txt文件,发现里面的中文都是乱码,问题是在Windows和手机上看都完全是正常的,这就十分 ...
- 涨姿势了解一下Kafka消费位移可好?
摘要:Kafka中的位移是个极其重要的概念,因为数据一致性.准确性是一个很重要的语义,我们都不希望消息重复消费或者丢失.而位移就是控制消费进度的大佬.本文就详细聊聊kafka消费位移的那些事,包括: ...
- rust 函数-生命周期
记录一下自己理解的生命周期. 每个变量都有自己的生命周期. 在c++里生命周期好比作用域, 小的作用域的可以使用大作用域的变量. 如果把这里的每个作用域取个名,那么就相当于rust里的生命周期注解. ...
- ca77a_c++__一个打开并检查文件输入的程序_流对象_操作文件
/*ca77a_c++__一个打开并检查文件输入的程序 习题:8.13 8.14*/ /*ca77a_c++__一个打开并检查文件输入的程序 习题:8.13 8.14 */ #include < ...
- JS新界面关闭原界面刷新的多种形式
------------恢复内容开始------------ 1.新界面为当前界面弹出的形式: 第一步:首先原界面的原生JS事件需要放到 (function () { ...... })(); 中 ...
- nginx在windows系统中启动、重启、停止,常用命令
cmd终端在进入到nginx的安装目录下使用对应命令 查看nginx的版本号:nginx -v 启动nginx:start nginx 快速停止或关闭nginx:nginx -s stop 正常停止或 ...
- SpringMVC拦截器使用
源码地址 拦截器interceptor 拦截器是URL请求的第一道门,所有请求会先经过拦截器interceptor,然后再进入controller: 下面,记录一种通过注解方法拦截所有需要登录才能发起 ...
- 慕课网--docker走进第一个javaweb应用
zh docker镜像就是一系列文件的集合 docker 容器就是一个进程.将docker镜像运行起来就是一个docker容器 docker仓库就是存储docker镜像的 1.docker的安装 do ...
- Python实用笔记 (14)函数式编程——匿名函数
当我们在传入函数时,有些时候,不需要显式地定义函数,直接传入匿名函数更方便. 在Python中,对匿名函数提供了有限支持.还是以map()函数为例,计算f(x)=x2时,除了定义一个f(x)的函数外, ...
- js语法基础入门(6)
6.函数 6.1.函数是什么? 函数就是具有名称和一定功能点代码块,这段代码块被封装起来,由一组语句组成,它们是JavaScript的基础模块单元,用于代码复用.信息隐藏和组合调用.一般来说,所谓编程 ...