![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
每天都在掉头发
这个作者很懒,什么都没留下…
展开
-
gulp和webpack的区别
1.gulp是一个构建工具,主要完成代码压缩、编译转化、自动刷新等工作webpack最开始作为项目的打包工具,随着plugin和loader功能的完善,webpack已经可以实现绝大多数项目构建功能2.gulp适用于多页面应用开发,对于目前的模块化开发适用性较差webpack适用于单页面应用开发3.gulp易于学习,易于使用,webpack学习比较复杂,学习较为困难...原创 2021-07-23 14:15:31 · 1248 阅读 · 0 评论 -
webpack构建流程
校验配置文件 :读取命令行传入或者webpack.config.js文件,初始化本次构建的配置参数 生成Compiler对象:为webpack事件流挂上自定义hooks webpack开始读取配置的Entries,递归遍历所有的入口文件 run/watch:如果运行在watch模式则执行watch方法,否则执行run方法 compilation:创建Compilation对象回调compilation相关钩子,依次进入每一个入口文件(entry),使用loader..原创 2021-07-19 18:27:06 · 132 阅读 · 0 评论 -
webpack的钩子函数
class Compiler extends Tapable { constructor(context) { super(); this.hooks = { /** @type {SyncBailHook<Compilation>} */ shouldEmit: new SyncBailHook(["compilation"]), /** @type {AsyncSeriesHook<Stats>} */ done: new AsyncSerie.原创 2021-07-19 18:22:27 · 1568 阅读 · 0 评论 -
手写loader
// txt-loader.js var utils = require('loader-utils')module.exports = function(source) { var options = loaderUtils.getOptions(this) || {}; // 删除console语句 if(options.deleteConsole) { source = source.replace(/console\.(log|dir|info)..原创 2021-07-19 17:36:04 · 95 阅读 · 0 评论 -
loader和plugin
loader:加载器,webpack只能打包js,json文件,而对于css、图片等无法打包,loader的主要作用就是进行文件转化,仅仅是为了打包服务,主要运行在文件打包之前。plugin:插件,对webpack功能的拓展,针对打包过程中的某些事件节点执行自定义操作,不仅仅是为了打包服务,运行在文件的整个编译周期中。常用的loader:babel-loader babel-corestyle-loader css-loaderfile-loader url-loaderless..原创 2021-07-17 16:00:51 · 405 阅读 · 0 评论 -
webpack基本概念
简介webpack是一个打包工具,它会从一个入口文件开始递归分析所有模块的依赖关系,根据依赖关系将模块打包成一个或多个文件主要功能1.依赖管理2.代码合并压缩3.语法转换4.性能优化入口entry:webpack进行依赖关系构建和打包的入口文件 ,入口文件可以是一个或者多个一般是src/main.js// Webpack .config.jsmodule.exports = { entry: { pageOne: './src/pageOne/app.原创 2021-07-17 15:24:50 · 165 阅读 · 0 评论 -
前端工程化
传统开发过程中会出现依赖关系复杂、命名冲突、项目结构复杂等问题,不利于开发和维护。因此提出了前端工程化,便于团队合作,提升开发效率主要包括模块化、组件化、规范化等特点1.模块化将一个大的文件拆分成多个相互依赖的小文件,每个文件都是一个单独的模块,只对外暴露相应的接口,降低模块之间的耦合性(这里一般指的是JS文件和CSS文件)2.组件化将页面上每个独立可视可交互的区域视为一个组件,每个组件独立开发,各组件之间不会相互影响,可以对单个组件进行替换修改等工作3.规范化主要包括项原创 2021-07-17 14:17:26 · 69 阅读 · 0 评论