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 方法一: 首 ...
随机推荐
- PHP通过映射类查找类所在文件
$reflectObj = new ReflectionClass(类名); $file_name = $reflectObj->getFileName(); var_dump($file_na ...
- jqgrid 操作
1.获取单个id 获取行号,有这种方式: var rowid = $("#gridList").jqGrid("getGridParam", "sel ...
- Java原生隐藏字符-工具类
package com.seesun2012.common.util; /** 隐藏字符-工具类 @author seesun2012@163.com */ public class HiddenCh ...
- node.js mysql 使用总结
npm install mysql 使用mysql连接池 let mysql = require('mysql'); let db_config = { "connectionLimit&q ...
- Java 条件语句
1.if...else 一个 if 语句包含一个布尔表达式和一条或多条语句. if(布尔表达式) { //如果布尔表达式为true将执行的语句 }else{ //如果布尔表达式为false将执行的语句 ...
- 进程 multiprocessing详解
一 ,核心 就是像线程一样管理进程 ,类似于threading ,cup利用率较好,该模块用来跨平台的多进程模块,含有一个Process 类代表进程对象,start() 启动进程 Process语法结 ...
- python 爬虫初试
python3.5 抓网易新闻的排行榜上的新闻,主要用自带的request模块和lxml import re from urllib import request from lxml import ...
- Zepto和Jquery区别
---恢复内容开始--- <zepto移动端事件> 1.$("#xx").tap(function(){ //tap在屏幕点击时触发 alert("sssss ...
- NetBeans 仿notepad++风格
一直喜欢notepad++配色跟Courier New字体.但notepad++毕竟功能有限. 改用了NetBeans,调整了下样式,终于感觉看着舒服了. 下载链接:点击下载,配置里导入就OK 风格截 ...
- 清理SharePoint 2010的SQL Server 2008 R2日志数据库的方法
最近发现Sharepoint的数据库磁盘经常满,导致无法保存数据,经检查发现数据磁盘的所有日志文件远远大于数据文件,因此需要收缩日志文件,一开始利用图形化的收缩文件方式,只有收缩数据文件的大小,对于日 ...