webpack
文章平均质量分 90
酒 客
这个作者很懒,什么都没留下…
展开
-
webpack知识点整理
webpack知识点整理webpack的认识什么是webpack webpack是一种前端资源构建工具,一个静态资源打包器,在webpack看来,前端所有的资源文件(js/json/css/img/less/html/…)都会作为模块处理。它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源。webpack的五个核心概念Entry–入口(Entry)指示webpack以那个文件为入口起点开始打包,分析构建内部依赖图Output–输出(Output)指示webpack打包后的资源原创 2022-03-28 20:35:10 · 1880 阅读 · 0 评论 -
11_Vue3-CLI和Vite的使用
Vue3-Cli和Vite的基本使用Vue CLI脚手架什么是Vue脚手架?我们前面学习了如何通过webpack配置Vue的开发环境,但是在真实开发中我们不可能每一个项目从头来完成。所有的webpack配置,这样显示开发的效率会大大的降低;所以在真实开发中,我们通常会使用脚手架来创建一个项目,Vue的项目我们使用的就是Vue的脚手架;脚手架其实是建筑工程中的一个概念,在我们软件工程中也会将一些帮助我们搭建项目的工具称之为脚手架;Vue的脚手架就是Vue CLI:CLI是Com原创 2022-02-09 13:12:56 · 1510 阅读 · 0 评论 -
10_Vue3组件化之webpack5篇(四)
Vue3组件化之webpack5篇(四)为什么要搭建本地服务器?目前我们开发的代码,为了运行需要有两个操作:操作一:npm run build,编译相关的代码;操作二:通过live server或者直接通过浏览器,打开index.html代码,查看效果;这个过程经常操作会影响我们的开发效率,我们希望可以做到当文件发生变化时,可以自动的完成编译和展示;为了完成自动编译,webpack提供了几种可选的方式:webpack watch mode;webpack-dev-server(常用);原创 2022-02-07 14:14:46 · 381 阅读 · 0 评论 -
09_Vue3组件化之webpack5篇(三)
Vue3组件化之webpack5篇(三)为什么需要babel?事实上,在开发中我们很少直接去接触babel,但是babel对于前端开发来说,目前是不可缺少的一部分:开发中,我们想要使用ES6+的语法,想要使用TypeScript,开发React项目,它们都是离不开Babel的;所以,学习Babel对于我们理解代码从编写到线上的转变过程至关重要;那么,Babel到底是什么呢?Babel是一个工具链,主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为向后兼容版本的Java原创 2022-02-06 18:50:04 · 498 阅读 · 0 评论 -
08_Vue3组件化之webpack5篇(二)
Vue3组件化之webpack5篇(二)加载图片案例准备为了演示我们项目中可以加载图片,我们需要在项目中使用图片,比较常见的使用图片的方式是两种:img元素,设置src属性;其他元素(比如div),设置background-image的css属性;file-loader要处理jpg、png等格式的图片,我们也需要有对应的loader:file-loaderfile-loader的作用就是帮助我们处理import/require()方式引入的一个文件资源,并且会将它放到我们输出的文件夹中原创 2022-02-06 13:12:55 · 1488 阅读 · 0 评论 -
07_Vue3组件化之webpack5篇(一)
Vue3组件化之webpack5篇(一)认识webpack事实上随着前端的快速发展,目前前端的开发已经变的越来越复杂了:比如开发过程中我们需要通过模块化的方式来开发;比如也会使用一些高级的特性来加快我们的开发效率或者安全性,比如通过ES6+、TypeScript开发脚本逻辑,通过sass、less等方式来编写css样式代码;比如开发过程中,我们还希望实时的监听文件的变化来并且反映到浏览器上,提高开发的效率;比如开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化;等等….但是对于很原创 2022-02-05 16:59:52 · 1709 阅读 · 0 评论 -
webpack面试题总结
webpack面试题总结1. webpack与grunt、gulp的不同?三者都是前端构建工具,grunt和gulp在早期比较流行,现在webpack相对来说比较主流,不过一些轻量化的任务还是会用gulp来处理,比如单独打包CSS文件等。grunt和gulp是基于任务和流(Task、Stream)的。类似jQuery,找到一个(或一类)文件,对其做一系列链式操作,更新流上的数据, 整条链式操作构成了一个任务,多个任务就构成了整个web的构建流程。webpack是基于入口的。webpack会自动地递归原创 2021-11-27 15:32:14 · 381 阅读 · 1 评论 -
webpack的使用知识点总结(三)
webpack知识点总结(三)接上一篇webpack知识点总结(二):https://blog.csdn.net/weixin_50903927/article/details/121574650?spm=1001.2014.3001.5501四、webpack配置模块详解1.Entry入口模块 Entry作为webpack配置的起点,webpack根据Entry找到打包入口,开始打包,一共有三种形式:字符串String:entry:’./src/index.js’----这种情况用于单页原创 2021-11-27 14:50:12 · 500 阅读 · 0 评论 -
webpack的使用知识点总结(二)
webpack知识点总结(二)接上一篇webpack知识点总结(一):https://blog.csdn.net/weixin_50903927/article/details/121558016?spm=1001.2014.3001.5501三、webpack生产环境的配置1.单独提取css文件下载插件:npm i --save-d mini-css-extract-plugin引入插件:const MiniCssExtractPlugin=require('mini-css-extract-p原创 2021-11-27 11:32:32 · 541 阅读 · 0 评论 -
webpack的使用知识点总结(一)
webpack知识点总结(一)webpack官网:https://webpack.js.org/一、webpack的基本使用1.webpack是什么 webpack是一种前端资源构建工具,一个静态资源打包器,在webpack看来,前端所有的资源文件(js/json/css/img/less/html/…)都会作为模块处对应的理。它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源。2.webpack的五个核心概念 Entry–入口(Entry)指示webpack以那个文件为入口起点开原创 2021-11-26 13:33:11 · 130 阅读 · 0 评论