前端随心记---------webpack管理工具

webpack:

官网:https://www.webpackjs.com/

  由来:

  1.开发的时候,我们写的代码是有注释,有空格(文件比较大)在开发环境中注释有意义的,但是在生产环境中,注释是没有意义的。代码应该是尽可能压缩的足够小(网络请求)如果我们没有借助一些其他工具的时候,我们需要手工的把 xxx.js 转换 xxx.mini.js 文件。(文件美化)

  2.我们的js在发展的过程中,出现很多的新特性,例如 es6 箭头函数、class 语法糖,Promise等。这些新的特性在不做处理的时候是很难在低版本的浏览器适应。尝试做转换,手工的转换 在线转换工具。(js兼容性)

  3.我们的css开发,在发展过程中,也出现一些预处理的css,例如 less sass stylus等....这些预处理的css 写起来非常的方便,但是这些预处理的文件浏览器默认是不支持的,则我们需要做转换,可以借助一些在线转换工具转换成 css 文件。(css预处理)

  概念:

   本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

  webpack是前端的一个项目构建工具,它是基于Node.js开发出来的一个前端工具。

  

  安装webpack的两种方式:

  1.全局安装:运行“npm install webpack -g”,这可以在全局中使用webpack命令

  2.局部安装:运行 “npm  install  webpack --save-dev” 安装到项目依赖中。

 

webpack默认只能打包处理JS类型的文件,无法处理其他的非JS类型的文件,

如果要处理非JS类型文件,我们需要手动安装一些合适第三方loader 加载器

如果要打包处理css文件,需要安装“cnpm install style-loader css-loader -D”,再打开

webpack常用的loaders和plugins?(面试题)

   最基本的css处理loader是css-loader,style-loader,(css-loader 处理的是css 中的@import 和url, 根据路径(相对路径)找到相应的资源,但它不处理具体的资源,style-loader则是把打包后的css文件插入到html中。)

   处理图片主要用到两个loader: url-loader style-loader. url-loader的作用是把图片转化成base64编码的字符串,然后内嵌到到js文件中。 file-loader 则是把图片打包成一个个单独的图片文件,并返回它们的路径。

https://www.cnblogs.com/SamWeb/p/10069922.html

loaders和plugins的区别是?(面试题)

主要区别
  loader 用于加载某些资源文件。 因为webpack 本身只能打包commonjs规范的js文件,对于其他资源例如 css,图片,或者其他的语法集,比如 jsx, coffee,是没有办法加载的。 这就需要对应的loader将资源转化,加载进来。从字面意思也能看出,loader是用于加载的,它作用于一个个文件上。

  plugin 用于扩展webpack的功能。它直接作用于 webpack,扩展了它的功能。当然loader也时变相的扩展了 webpack ,但是它只专注于转化文件(transform)这一个领域。而plugin的功能更加的丰富,而不仅局限于资源的加载。

 前文提到Gulp管理工具,使用Gulp,是基于task任务的,使用webpack是基于整个项目进行构建的。

原文地址:https://www.cnblogs.com/hudunyu/p/11691852.html

时间: 2024-10-02 07:38:12

前端随心记---------webpack管理工具的相关文章

前端随心记---------gulp管理工具

GULP 什么是guip?1.用自动化构建工具增强你的工作流程!2.gulp是一个工具包,它可以帮助我们解决在开发过程中遇到痛苦或者耗时的任务.避免出现低级错误.3.特点:易于使用构建快速插件高质易于学习 Gulp的环境配置 1.安装nodejs(依赖nondejs)2.全局安装gulp-cli -g3.创建package.json4.局部安装gulp --save-dev5.创建gulpfile.js6.命令行执行gulp+“任务名”命令 gulp插件1.gulp-concat 连接js2.g

前端随心记---------简单.可扩展的状态管理工具MobX

Mobx是一个功能强大,上手非常容易的状态管理工具.就连redux的作者也曾经向大家推荐过它,在不少情况下你的确可以使用Mobx来替代掉redux. MobX: MobX 是一个经过战火洗礼的库,它通过透明的函数响应式编程(transparently applying functional reactive programming - TFRP)使得状态管理变得简单和可扩展.Mobx 就是一个集中化管理数据的库,类似之前学习的 vuex 和 redux. 为什么要使用它呢? 在单页项目中,实现组

前端随心记---------React简介(1)

React 简介: React 是一个用于构建用户界面的 JAVASCRIPT 库. React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源. React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它. React诞生的原因 主要是当时市面上的这些框架都无法满足 facebook 公司的业务需求 (1. 数据量很大,数据不好管理

前端随心记---------vuejs流行的UI框架

一:Element element ui框架的按钮组件,这款由饿了么前端开源的UI框架,一经面世,就收获大量程序员的芳心.在github 上更是高达29.8k的star早已说明一切.用于开发PC端的页面还是绰绰有余的.如果说你是用vue开发者,却没用过element UI,那你肯定不是合格的vue开发者. 文档地址:http://element-ui.cn 二:iview iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品.使用单文件的 Vue 组件化

前端随心记(一)

前端 基础易错题(一) 案例一::介绍js原型链继承原理,以及prototype和--proto--的区别! 1.任何一个构造函数都有一个属性prototype叫做构造函数的原型,是一个对象,并且该对象默认情况下指向Object实例,constructor指向当前构造函数,--proto--指向Object.protopyte. 2.使用构造函数实例化的对象存在一个--proto--属性,指向当前构造函数的prototype. 3.当我们调用实例对象的属性和方法时,先在自身上面进行查找[自己身上

前端随心记---------前海面试汇总

react里面:state和prop的区别?setState为什么是异步的?组件传值有几种方式? 答:1.prop用于定义外部接口,state用于记录内部状态.2.prop的赋值在外部使用组件时,state的赋值在组建内部.3.组件不应该改变prop的值,但是state的存在目的是让组件来改变. 2.setState异步更新状态使得并发更新组件成为可能. 资料:https://segmentfault.com/a/1190000013040438?utm_source=tag-newest 3.

前端随心记---------云计算(1)

云计算的定义(NIST) –  云计算是一种能够通过网络以便利的.按需的方式获取计算资源(网络.服务器.存储.应用和服务)的模式 –  这些资源来自一个共享的.可配置的资源池,并能够快速获取和释放,提供资源的网络被称为“云” –  云模式能够提高可用性 –  云计算的核心思想,是将大量用网络连接的计算资源统一管理和调度,构成一个计算资源池向用户按需服务. 高可用性?? • 计算机系统的可用性 • – 计算机系统的可用性定义为系统保持正常运行时间的百分比. • – MTTF/(MTTF+MTTR)

前端随心记---------vuex

为什么会出现vuex? 在一些大型应用中,有时我们会遇到单页面中包含着大量的组件及复杂的数据结构,而且可能各组件还会互相影响各自的状态,在这种情况下组件树中的事件流会很快变得非常复杂也使调试变得异常困难.为了解决这种情况,我们往往会引入状态管理这种设计模式,来降低这种情况下事件的复杂程度并且使调试变得可以追踪.而 Vuex 就是一个专门给为 Vue.js设计的状态管理架构. vuex 概述 Vuex 是状态管理模式的一种实现库,主要以插件的形式和 Vue.js 进行配合使用,能够使我们在 Vue

前端随心记---------vue3.0终于来了,作者已公布源码

Vue3.0 何去何从? 就在国庆的第五天,10月5日凌晨,web前端开发框架Vuejs的作者:尤雨溪在微博宣布Vue3.0版本终于要面正式推出了!  其实,在11月14日-16日于多伦多举办的 VueConf TO 2018 大会上,尤雨溪发表了名为 “ Vue 3.0 Updates ” 的主题演讲,对 Vue 3.0 的更新计划.方向进行了详细阐述. 1.更快 Virtual DOM 完全重写,mounting & patching 提速 100% : 更多编译时(compile-time