## 在网页中会引用哪些常见的静态资源?
+ 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——概念的引入的更多相关文章

  1. Webpack 概念

    概念 webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图表(dependency ...

  2. Webpack概念

    webpack概念 我经常用 webpack,打算做一次比较详细的概念清点和梳理.从 0 配置 webpack,由于 webpack5(2019.07.27)暂时还没有发布.并且从Webpack Mi ...

  3. webpack.config.js====引入Jquery库文件

    1. 安装 cnpm install --save jquery expose-loader 2. 在webpack.config.js中配置 Jquery库是使用的webpack的一个插件Provi ...

  4. [WIP]webpack 概念

    创建: 2019/04/09 概念    入口 指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始. 进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖 ...

  5. webpack打包不引入vue、echarts等公共库

    如果我们打包的时候不想将vue.echarts等公共库包含在内,需要配置两处地方, 以下以基于vue-cli生成的项目为基准: 1webpack配置: // webpack.base.conf.js ...

  6. webpack 打包CSS 引入图片

    加载css 安装style-loader, css-loader npm install style-loader css-loader --save-dev 配置webpack.config.js文 ...

  7. 1.WebPack概念

    一.什么是WebPack 官方解释:本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构 ...

  8. Java 多线程详解(一)------概念的引入

    这是讲解 Java 多线程的第一章,我们在进入讲解之前,需要对以下几个概念有所了解. 1.并发和并行 并行:指两个或多个时间在同一时刻发生(同时发生): 并发:指两个或多个事件在一个时间段内发生. 在 ...

  9. 如何在vue-cli webpack中全局引入jquery

    1.首先执行:npm install  jQuery --save-dev,在package.json里加入jQuery. 2.修改build下的webpack.base.conf.js 方法一: 首 ...

随机推荐

  1. PHP通过映射类查找类所在文件

    $reflectObj = new ReflectionClass(类名); $file_name = $reflectObj->getFileName(); var_dump($file_na ...

  2. jqgrid 操作

    1.获取单个id 获取行号,有这种方式: var rowid = $("#gridList").jqGrid("getGridParam", "sel ...

  3. Java原生隐藏字符-工具类

    package com.seesun2012.common.util; /** 隐藏字符-工具类 @author seesun2012@163.com */ public class HiddenCh ...

  4. node.js mysql 使用总结

    npm install mysql 使用mysql连接池 let mysql = require('mysql'); let db_config = { "connectionLimit&q ...

  5. Java 条件语句

    1.if...else 一个 if 语句包含一个布尔表达式和一条或多条语句. if(布尔表达式) { //如果布尔表达式为true将执行的语句 }else{ //如果布尔表达式为false将执行的语句 ...

  6. 进程 multiprocessing详解

    一 ,核心 就是像线程一样管理进程 ,类似于threading ,cup利用率较好,该模块用来跨平台的多进程模块,含有一个Process 类代表进程对象,start() 启动进程 Process语法结 ...

  7. python 爬虫初试

    python3.5  抓网易新闻的排行榜上的新闻,主要用自带的request模块和lxml import re from urllib import request from lxml import ...

  8. Zepto和Jquery区别

    ---恢复内容开始--- <zepto移动端事件> 1.$("#xx").tap(function(){ //tap在屏幕点击时触发 alert("sssss ...

  9. NetBeans 仿notepad++风格

    一直喜欢notepad++配色跟Courier New字体.但notepad++毕竟功能有限. 改用了NetBeans,调整了下样式,终于感觉看着舒服了. 下载链接:点击下载,配置里导入就OK 风格截 ...

  10. 清理SharePoint 2010的SQL Server 2008 R2日志数据库的方法

    最近发现Sharepoint的数据库磁盘经常满,导致无法保存数据,经检查发现数据磁盘的所有日志文件远远大于数据文件,因此需要收缩日志文件,一开始利用图形化的收缩文件方式,只有收缩数据文件的大小,对于日 ...