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/)

更多专业前端知识，请上【猿2048】www.mk2048.com

webpack——概念的引入相关推荐

webpack概念以及配置文件详解
Webpack 概念本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系 ...
Webpack 概念
概念 webpack 是一个现代的 JavaScript 应用程序的模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构建一个依赖关系图表(dependency ...
Webpack项目中引入Bootstrap4.x
Bootstrap是一个简洁.直观.强悍的前端开发框架,在Web开发中使用频率很高,本文主要记录一下如何在 webpack项目中引入Bootstrap4.x. 由于Bootstrap在各个Vue组件中 ...
Webpack项目中引入IconFont图标
本篇文章将介绍一下如何在Vue Webpack项目中引入IconFont图标. IconFont官网:https://www.iconfont.cn/ 1.打开IconFont官网并登陆自己的账户. ...
webpack打包css image,webpack 打包CSS 引入图片
加载css 安装style-loader, css-loader npm install style-loader css-loader --save-dev 配置webpack.config.js文 ...
webpack html自动引入,开发必备的webpack4
首先webpack4建议使用node版本在8.5以上,是因为要兼容新版npm下的npx,cmd中node -v查看node版本. 1.什么是webpack WebPack可以看做是模块打包机:它做的事 ...
vue ---- 工程化概念、webpack概念、webpack的安装配置，以及简单使用
引入jQuery,并使用他操作dom元素 index.js //1. 使用 ES6 中的高级语法, 导入一个jQuery import $ from 'jquery'//2. 定义 jQuery的入口 ...
webpack概念简介
目录一.webpack概述 1. 什么是webpack? 2. 为什么要使用webpack? 二.webpack相关概念 1. 入口(entry) 2. 出口(output) 3. 加载器(load ...
CSS概念，引入，选择器
概念层叠样式表,定义如何显示HTML元素. 使用方式行内样式不推荐使用此方式结构和样式的杂糅会影响后期的维护 <p style="color: red"> ...

webpack——概念的引入

webpack——概念的引入相关推荐

最新文章

热门文章