webpack——概念的引入
## 在网页中会引用哪些常见的静态资源?
+ JS
- .js .jsx .coffee .ts(TypeScript 类 C# 语言)
+ CSS
- .css .less .sass .scss
+ Images
- .jpg .png .gif .bmp .svg
+ 字体文件(Fonts)
- .svg .ttf .eot .woff .woff2
+ 模板文件
- .ejs .jade .vue【这是在webpack中定义组件的方式,推荐这么用】
## 网页中引入的静态资源多了以后有什么问题???
1. 网页加载速度慢, 因为 我们要发起很多的二次请求;
2. 要处理错综复杂的依赖关系
## 如何解决上述两个问题
1. 合并、压缩、精灵图、图片的Base64编码
2. 可以使用之前学过的requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系;
## 什么是webpack?
webpack 是前端的一个项目构建工具,它是基于 Node.js 开发出来的一个前端工具;
## 如何完美实现上述的2种解决方案
1. 使用Gulp, 是基于 task 任务的;//有一个一个task任务串联起来,小巧灵活,方便我们做些小的构建,但基于项目去构建的话,就有点力不从心了,从功能点去考虑
2. 使用Webpack, 是基于整个项目进行构建的; //从项目角度去考虑
+ 借助于webpack这个前端自动化构建工具,可以完美实现资源的合并、打包、压缩、混淆等诸多功能。
+ 根据官网的图片介绍webpack打包的过程
+ [webpack官网](https://www.webpackjs.com/)
webpack——概念的引入的更多相关文章
- Webpack 概念
概念 webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图表(dependency ...
- Webpack概念
webpack概念 我经常用 webpack,打算做一次比较详细的概念清点和梳理.从 0 配置 webpack,由于 webpack5(2019.07.27)暂时还没有发布.并且从Webpack Mi ...
- webpack.config.js====引入Jquery库文件
1. 安装 cnpm install --save jquery expose-loader 2. 在webpack.config.js中配置 Jquery库是使用的webpack的一个插件Provi ...
- [WIP]webpack 概念
创建: 2019/04/09 概念 入口 指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始. 进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖 ...
- webpack打包不引入vue、echarts等公共库
如果我们打包的时候不想将vue.echarts等公共库包含在内,需要配置两处地方, 以下以基于vue-cli生成的项目为基准: 1webpack配置: // webpack.base.conf.js ...
- webpack 打包CSS 引入图片
加载css 安装style-loader, css-loader npm install style-loader css-loader --save-dev 配置webpack.config.js文 ...
- 1.WebPack概念
一.什么是WebPack 官方解释:本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构 ...
- Java 多线程详解(一)------概念的引入
这是讲解 Java 多线程的第一章,我们在进入讲解之前,需要对以下几个概念有所了解. 1.并发和并行 并行:指两个或多个时间在同一时刻发生(同时发生): 并发:指两个或多个事件在一个时间段内发生. 在 ...
- 如何在vue-cli webpack中全局引入jquery
1.首先执行:npm install jQuery --save-dev,在package.json里加入jQuery. 2.修改build下的webpack.base.conf.js 方法一: 首 ...
随机推荐
- Python 进阶
高阶函数 定义 函数接受的参数是一个函数 函数的返回值为一个函数 满足以上2点中其中一个就是高阶函数 函数嵌套 定义 函数中def定义一个函数 嵌套会存在闭包, 其他情况不会有闭包(闭包闭的是变量) ...
- [转]Debugging into .NET Core源代码的两种方式
本文转自:http://www.cnblogs.com/maxzhang1985/p/6015719.html 阅读目录 一.前言 二.符号服务器 三.项目中添加ASP.NET Core源代码 四.写 ...
- C#生成二维码的内容
生成二维码的内容 using QRCoder; // 生成二维码的内容 string strCode = this.txtQr.Text.Trim(); if (string.IsNullOrWhit ...
- 11、幻灯片:Slides
/* ---ts----*/ import { Page,Slides } from 'ionic-angular'; import { ViewChild } from '@angular/core ...
- struts2 :Unable to load configuration. ……struts-default.xml:46:178异常解决
这个问题是缺少jar包 除了ognl-2.6.11.jar,struts2-core-2.1.6.jar,xwork-2.1.2.jar,commons-logging-1.0.4.jar外, 还需要 ...
- Hibernate中的session的线程安全问题
SessionFactory的实现是线程安全的,多个并发的线程可以同时访问一 个SessionFactory并从中获取Session实例, 而Session不是线程安全的,Session中包含了数 据 ...
- 重构指南 - 尽快返回(Return ASAP )
尽快返回就是如果方法中的条件判断可以得到结果,则尽快返回该结果. 1. 检查条件,如果不满足就立即返回,不执行下面的逻辑. 2. 当包含大量的if else嵌套,代码可读性变差,也容易出现异常. 3. ...
- css之margin,padding的百分比
注意:上下内边距与左右内边距一致:即上下内边距的百分数会相对于父元素宽度设置,而不是相对于高度. PS:而且是基于父元素内容的宽度(width属性的大小),不是基于父元素整个框架的宽度
- [JAVA小项目]GUI界面的局域网聊天室
思路: 1.服务端: 1.1 创建ServerSocket 监听本地端口 1.2 循环接收多个客户端的连接,并且把多个客户端连接的每个管道都为其创建线程. 服务端类的成员:链表--每个成员都是线程类- ...
- 最新机动车行驶证模板PSD可编辑分层文件下载
机动车行驶证PSD模板下载地址: http://www.qijieworld.com/thread-1834752-1-1.html 模板为psd格式,内容可编辑修改,需使用 Photoshop CS ...