gulp、webpack学习笔记

  前言:这两天天学了gulp和webpack的基本使用方法,其实对于这些工具,了解基本的用法、熟悉一些常用配置和方法就足够日常使用了。更复杂的等到需要时才再查相关文档就可以了。

  gulp和webpack虽然有相似的功能,比如压缩、合并文件,但应该算是两种类型的工具。

  gulp作为自动化构建工具主要的功能就是自动压缩、css转换、合并资源文件,减少http请求,这些功能对于一般的前端项目而言已经足够使用了。而且使用起来也更加方便,

在gulpfile.js引入组件并创建任务便可以很方便的使用。

  而webpack是一个大而全的前端项目构建工具,基本前端项目构建过程中的问题都有所涉略,无论是模块化开发,按需加载,还是转换、编译合并资源文件。甚至可以将第三方类

库作为模块实用。学习的过程也加深了对模块化开发的认识。各种插件对于提高开发效率,整合文件也很实用。但是配置比较繁琐。

  总之,如果只是一般的资源优化,使用gulp就足够了;而webpack是构建模块化开发项目的工具。二者没有太多冲突,甚至可以一起使用。

  学习webpack为了接下来学vue,或许只有在学习vue的过程才能更好的体验webpack的作用。

  

时间: 2024-10-12 15:59:46

gulp、webpack学习笔记的相关文章

webpack学习笔记一

webpack.gulp.grunt是前端打包功能工具:因为已经学习了gulp,而最近发现webpack很火,于是着手学习webpack.本篇是webpack学习笔记系列的第一篇,欢迎指教. 我是从慕课网以及官网文档相结合的方式学习的,从官方文档学到的第一个知识点是在使用webpack打包过程中,即使没有webpack.config,js这个文件也是可以的. 首先是全局安装webpack,cmd(如果是window系统,在任意位置)执行命令: npm install --g webpack或cn

webpack学习笔记八

webpack自动刷新浏览器 webpack开发服务器,是webpack官方提供的一个辅助开发工具,它可以自动监控项目下的文件,一旦有修改保存的操作,它就会自动执行打包命令,将我们的代码重新打包,并且需要的话还可以刷新浏览器. 首先我们安装webpack-dev-server 在CMD中安装执行npm intall webpack-dev-server -g 在项目目录执行安装依赖命令: npm install --save-dev webpack-dev-server 其中webpack-de

webpack学习笔记

webpack笔记 webpack学习笔记 1.全局安装 npm install webpack -g 2.作为项目依赖安装 npm install webpack --save-dev 3.安装css-loader.sass-loader.node-scss npm install css-loader sass-loader node-scss --save-dev 4.webpack配置 // webpack.config.js var path = require('path'); mo

更博不能忘——webpack学习笔记

webpack是前端构建系统就像grunt和gulp(之前有学习过grunt所以也就大概明白webpack是个什么东西),所以说前端技术大部分还真是相通的,现在觉得当时多看的东西并不白费,虽然长时间不用会忘掉一丢丢,但是看过脑海中还是有印象的. webpack能够用作模块加载和打包类似Browserify,且能做更多.类似上诉模块管理工具都会有一个相应的配置文件,用于说明,你打包的文件,包装的模块等. webpack常用命令: webpack -p 压缩混淆脚本 webpack --watch

webpack学习笔记(一)

写在前面: 近几年前端发展迅速,各种新标准的出现,angular.vue.react等框架也是N足鼎立,nodejs的出现使得前端也跨足到server领域,还出现了前端工程化的概念,这一切都在提醒各位前端开发者(工程师)一件事情:我们时时刻刻都需要学习,更新自己的知识体系. 正文: webpack是前端工程化的一个代表,工程化也是一个比较大的概念,所以我会针对自己的学习过程写一个系列的学习笔记,此为第一篇. webpack负责将资源文件模块化,通过它的加载器加载使用,最终将项目打包发布. web

webpack 学习笔记

一个简单的例子,明白了是怎么操作,文件怎么制作的.在我看来和gulp/grunt区别不算太大,但很多人都说比较好,先进多了 WebPack 官网地址:  http://webpack.github.io/ 安装: #npm install -g webpack 或       #npm install webpack -g 如果是linux/mac 可以用 #sudo npm install -g webpack 创建工程 (1)创建目录并进入目录 #mkdir webpack_test &&am

webpack 学习笔记 01 使用webpack的原因

本系列文章实际上就是官网文档的翻译加上自己实践过程中的理解. 伴随着websites演化至web apps的过程,有三个现象是很明显的: 页面中有越来越多的Js. 客户端能做的事情越来越多. 越来越少的页面重载(当然也伴随着更复杂的代码). 这些现象导致了什么?大量的前端代码. 庞大的代码库需要被高效的组织.而Module(组件式)开发的系统即为大多数开发者采取的途径. MODULE SYSTEM STYLES 有很多种定义依赖,导出变量的标准或者说方法: <script> tag 的形式(不

webpack学习笔记,前方有坑,请注意!!!!!

拖了好久,终于决定系统学习一下webpack(其实是自己懒,哈哈哈),学习任何东西都要亲自动手才行,learn by doing 才是最高效的学习方法,以下是我在学习webpack的心得和踩得的坑,希望看到的同行,可以少踩坑,文章写得烂,不要介意,哈哈哈,下面开始表演. 什么是webpack就不用介绍了,我主要列举遇到的问题. 使用步骤: 新建一个文件夹,然后npm init初始化一下,然后非全局安装webpack 1.打包时记得全局安装webpack,否则命令会报错:"webpack"

webpack学习笔记一(入门)

webpack集成了模块加载和打包等功能 ,这两年在前端圈越来越手欢迎.平时一般是用requirejs.seajs作为模块加载用,用grunt/gulp作为前端构建.webpack作为模块化加载兼容了amd/cmd模式,并且作为模块化的资源可以是js/css/image  coffeescript/sass/less  ES2015 modles TypeScript 等功能非常强大,作为前端构建工具还可以和grunt/gulp配合一起使用. 配置文件webpack.config.js也是非常清