![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
飞羽逐星
既然厌倦于追寻,那便一觅其中;自从一股逆风袭来,我已学会抵挡八面来风。
展开
-
webpack性能优化(四)
webpack性能优化(一).webpack性能优化(二).webpack性能优化(三).性能优化一、懒加载二、ESLint1.使用2.配置1.env2.parserOptions3.parser4.globals5.extends6.ignoreFiles7.rules三、BundleAnalyzer四、gzip1.B/S结构中的压缩传输2.使用webpack进行预压缩一、懒加载在一些页面中某些js只是需要事件或者某些条件才会触发,这种情况下可以使用懒加载,减少页面加载渲染的时间。//inde原创 2020-08-31 21:32:11 · 278 阅读 · 0 评论 -
webpack性能优化(三)
webpack性能优化(一).webpack性能优化一、代码压缩1.前言2.Terser3.webpack+Terser二、tree shaking一、代码压缩1.前言为什么要进行代码压缩减少代码体积;破坏代码的可读性,提升破解成本;什么时候要进行代码压缩生产环境使用什么压缩工具目前最流行的代码压缩工具主要有两个:UglifyJs和TerserUglifyJs是一个传统的代码压缩工具,已存在多年,曾经是前端应用的必备工具,但由于它不支持ES6语法,所以目前的流行度已有所下降。原创 2020-08-31 19:57:42 · 467 阅读 · 0 评论 -
webpack性能优化(二)
性能优化一、手动分包1.基本原理2.打包公共模块3.使用公共模块4.总结二、自动分包一、手动分包1.基本原理手动分包的总体思路是:先单独的打包公共模块公共模块会被打包成为动态链接库(dll Dynamic Link Library),并生成资源清单根据入口模块进行正常打包打包时,如果发现模块中使用了资源清单中描述的模块,则不会形成下面的代码结构//源码,入口文件index.jsimport $ from "jquery"import _ from "lodash"_.isAr原创 2020-08-31 16:39:30 · 563 阅读 · 1 评论 -
webpack性能优化(一)
性能优化一、减少模块解析1.什么叫做模块解析2.不做模块解析会怎样3.哪些模块不需要解析4.如何让某个模块不要解析二、优化loader性能1.进一步限制loader的应用范围2.缓存loader的结果3.为loader的运行开启多线程三、热替换 HMR1.流程2.使用和原理3.样式热替换一、减少模块解析1.什么叫做模块解析模块解析包括:抽象语法树分析、依赖分析、模块语法替换2.不做模块解析会怎样如果某个模块不做解析,该模块经过loader处理后的代码就是最终代码。如果没有loader对该模块原创 2020-08-30 20:12:13 · 763 阅读 · 1 评论 -
webpack性能优化概述
性能优化概述一、性能优化概述一、性能优化概述本章所讲的性能优化主要体现在三个方面:构建性能这里所说的构建性能,是指在开发阶段的构建性能,而不是生产环境的构建性能优化的目标,是降低从打包开始,到代码效果呈现所经过的时间构建性能会影响开发效率。构建性能越高,开发过程中时间的浪费越少传输性能传输性能是指,打包后的JS代码传输到浏览器经过的时间在优化传输性能时要考虑到:总传输量:所有需要传输的JS文件的内容加起来,就是总传输量,重复代码越少,总传输量越少文件数量:当访问页面时,需要传输的J原创 2020-08-30 08:55:55 · 208 阅读 · 0 评论 -
babel预设、插件和webpack中运行
babel预设一、babel预设1.babel预设二、babel插件1.`@babel/plugin-proposal-class-properties`2.`@babel/plugin-proposal-function-bind`3.`@babel/plugin-proposal-optional-chaining`4.`babel-plugin-transform-remove-console`5.`@babel/plugin-transform-runtime`三、webpack中运行一、babe原创 2020-08-29 21:44:28 · 879 阅读 · 1 评论 -
babel的安装和使用
babel的安装和使用一、babel的安装1.babel简介2.babel的安装二、babel的使用1.babel的使用2.babel的配置一、babel的安装官网:https://babeljs.io/民间中文网:https://www.babeljs.cn/1.babel简介babel一词来自于希伯来语,直译为巴别塔巴别塔象征的统一的国度、统一的语言而今天的JS世界缺少一座巴别塔,不同版本的浏览器能识别的ES标准并不相同,就导致了开发者面对不同版本的浏览器要使用不同的语言,和古巴比伦原创 2020-08-29 16:57:50 · 1240 阅读 · 0 评论 -
抽离css文件
抽离css文件一、抽离css文件一、抽离css文件目前,css代码被css-loader转换后,交给的是style-loader进行处理。style-loader使用的方式是用一段js代码,将样式加入到style元素中。而实际的开发中,我们往往希望依赖的样式最终形成一个css文件此时,就需要用到一个库:mini-css-extract-plugin该库提供了1个plugin和1个loaderplugin:负责生成css文件loader:负责记录要生成的css文件的内容,同时导出开启css-原创 2020-08-29 11:05:01 · 469 阅读 · 0 评论 -
预编译器less
预编译器less一、预编译器less1.基本原理2.LESS的安装和使用3.LESS的基本使用4.webpack中使用一、预编译器less1.基本原理编写css时,受限于css语言本身,常常难以处理一些问题:重复的样式值:例如常用颜色、常用尺寸重复的代码段:例如绝对定位居中、清除浮动重复的嵌套书写由于官方迟迟不对css语言本身做出改进,一些第三方机构开始想办法来解决这些问题其中一种方案,便是预编译器预编译器的原理很简单,即使用一种更加优雅的方式来书写样式代码,通过一个编译器,将其转换为原创 2020-08-27 23:59:48 · 948 阅读 · 0 评论 -
css module
css module一、css module1.思路2.实现原理3.如何应用样式一、css module1.思路通过命名规范来限制类名太过死板,而css in js虽然足够灵活,但是书写不便。css module 开辟一种全新的思路来解决类名冲突的问题css module 遵循以下思路解决类名冲突问题:css的类名冲突往往发生在大型项目中大型项目往往会使用构建工具(webpack等)搭建工程构建工具允许将css样式切分为更加精细的模块同JS的变量一样,每个css模块文件中难以出现冲突原创 2020-08-27 13:30:57 · 5689 阅读 · 0 评论 -
css in js
css in js一、css in js一、css in jscss in js 的核心思想是:用一个JS对象来描述样式,而不是css样式表例如下面的对象就是一个用于描述样式的对象:const styles = { backgroundColor: "#f40", color: "#fff", width: "400px", height: "500px", margin: "0 auto"}由于这种描述样式的方式根本就不存在类名,自然不会有类名冲突至原创 2020-08-26 23:03:34 · 1032 阅读 · 0 评论 -
css命名方法-BEM
这里写目录标题一、BEM一、BEMBEM是一套针对css类样式的命名方法。其他命名方法还有:OOCSS、AMCSS、SMACSS等等BEM全称是:Block Element Modifier一个完整的BEM类名:block__element_modifier,例如:banner__dot_selected,可以表示:轮播图中,处于选中状态的小圆点三个部分的具体含义为:Block:页面中的大区域,表示最顶级的划分,例如:轮播图(banner)、布局(layout)、文章(article)原创 2020-08-26 21:51:35 · 341 阅读 · 0 评论 -
webpack拆分css
这里写目录标题1.利用webpack拆分css {ignore}1.css-loader2.style-loader1.利用webpack拆分css {ignore}要拆分css,就必须把css当成像js那样的模块;要把css当成模块,就必须有一个构建工具(webpack),它具备合并代码的能力而webpack本身只能读取css文件的内容、将其当作JS代码进行分析,因此,会导致错误于是,就必须有一个loader,能够将css代码转换为js代码1.css-loadercss-loader的作用,就原创 2020-08-26 20:06:53 · 747 阅读 · 0 评论 -
webpack-css工程化
css工程化一、css工程化1.类名冲突的问题2.重复样式3.css文件细分问题4.如何解决1.解决类名冲突2.解决重复样式的问题3.解决css文件细分问题一、css工程化1.类名冲突的问题当你写一个css类的时候,你是写全局的类呢,还是写多个层级选择后的类呢?你会发现,怎么都不好过深的层级不利于编写、阅读、压缩、复用过浅的层级容易导致类名冲突一旦样式多起来,这个问题就会变得越发严重,其实归根结底,就是类名冲突不好解决的问题2.重复样式这种问题就更普遍了,一些重复的样式值总是不断的出现原创 2020-08-26 17:17:40 · 249 阅读 · 0 评论 -
webpack内置插件
内置插件一、内置插件DefinePluginBannerPluginProvidePlugin一、内置插件所有的webpack内置插件都作为webpack的静态属性存在的,使用下面的方式即可创建一个插件对象const webpack = require("webpack")new webpack.插件名(options)DefinePlugin全局常量定义插件,使用该插件通常定义一些常量值,例如:new webpack.DefinePlugin({ PI: `Math.PI`, /原创 2020-08-26 09:57:54 · 523 阅读 · 0 评论 -
webpack常用拓展
常用拓展一、CleanWebpackPlugin二、HtmlWebpackPlugin三、CopyPlugin四、file-loader五、url-loader六、路径问题一、CleanWebpackPlugin每次打包后不会再次生成新的文件,而是对原来打包的文件进行更新// webpack.config.jsvar { CleanWebpackPlugin } = require("clean-webpack-plugin")module.exports = { mode: "devel原创 2020-08-25 22:37:17 · 307 阅读 · 0 评论 -
webpack区分环境和其它配置
区分环境一、区分环境二、其他配置1.context2.output1.library2.libraryTarget3.target4.module.noParse5.resolve1.modules2.extensions3.alias6.externals7.stats一、区分环境有些时候,我们需要针对生产环境和开发环境分别书写webpack配置为了更好的适应这种要求,webpack允许配置不仅可以是一个对象,还可以是一个函数module.exports = env => { ret原创 2020-08-25 10:23:13 · 830 阅读 · 0 评论 -
webpack-loader和plugins
loader一、loader1.处理loaders流程2.loader配置3.loader匹配规则二、plugin1.事件名称2.事件类型3.处理函数一、loaderwebpack做的事情,仅仅是分析出各种模块的依赖关系,然后形成资源列表,最终打包生成到指定的文件中。更多的功能需要借助webpack loaders和webpack plugins完成。webpack loader: loader本质上是一个函数,它的作用是将某个源码字符串转换成另一个源码字符串返回。loader函数的将在模块原创 2020-08-23 16:03:36 · 500 阅读 · 0 评论 -
webpack入口与出口
入口与出口一、入口与出口1.出口2.入口二、实践1.一个页面一个整合js2.一个页面多个整合js3.单页应用一、入口与出口模块化代码中,比如require("./"),表示当前js文件所在的目录在路径处理中,"./"表示node运行目录__dirname: 所有情况下,都表示当前运行的js文件所在的目录,它是一个绝对路径//dirname.jsconsole.log(__dirname);node内置模块 - path: https://nodejs.org/dist/late原创 2020-08-23 09:09:22 · 996 阅读 · 0 评论 -
webpack编译过程
编译过程一、编译过程1.初始化2.编译3.输出4.总过程一、编译过程webpack 的作用是将源代码编译(构建、打包)成最终代码整个过程大致分为三个步骤初始化编译输出1.初始化此阶段,webpack会将CLI参数、配置文件、默认配置进行融合,形成一个最终的配置对象。例:以及终端命令,整理成最终配置对象对配置的处理过程是依托一个第三方库yargs完成的此阶段相对比较简单,主要是为接下来的编译阶段做必要的准备目前,可以简单的理解为,初始化阶段主要用于产生一个最终的配置2.原创 2020-08-22 20:27:40 · 928 阅读 · 0 评论 -
devtool配置
devtool配置一、devtool配置1.source map 源码地图2.webpack中的source map3.对于开发环境一、devtool配置1.source map 源码地图本小节的知识与 webpack 无关前端发展到现阶段,很多时候都不会直接运行源代码,可能需要对源代码进行合并、压缩、转换等操作,真正运行的是转换后的代码与此同时就给调试带来了困难,因为当运行发生错误的时候,我们更加希望能看到源代码中的错误,而不是转换后代码的错误为了解决这一问题,chrome浏览器率先支持原创 2020-08-22 13:11:46 · 790 阅读 · 0 评论 -
webpack编译分析和配置文件
编译分析和配置文件一、编译分析二、配置文件一、编译分析//a.jsconsole.log('module a');module.exports = 'a';//index.jsconsole.log('module index');var a = require('./a');console.log(a);我们这里思考打包过程,如果整理模块,且不互相污染变量var modules = {//通过一个变量,将模块保存为对象形式 './src/a.js': function(mo原创 2020-08-22 10:37:03 · 332 阅读 · 0 评论 -
webpack-模块化兼容性
模块化兼容性一、模块化兼容性1.同模块化标准2.不同模块化标准3.最佳实践一、模块化兼容性由于webpack同时支持CommonJS和ES6 module,因此需要理解它们互操作时webpack是如何处理的1.同模块化标准如果导出和导入使用的是同一种模块化标准,打包后的效果和之前学习的模块化没有任何差异2.不同模块化标准不同的模块化标准,webpack按照如下的方式处理// ./src/a.jsexport default {//es6导出 a: 1, b: 2,原创 2020-08-21 21:11:09 · 310 阅读 · 0 评论 -
webpack安装使用
webpack安装使用一、安装1.webpack简介2.webpack的安装二、使用一、安装webpack官网:https://www.webpackjs.com/目前的最新版本:webpack41.webpack简介webpack是基于模块化的打包(构建)工具,它把一切视为模块它通过一个开发时态的入口模块为起点,分析出所有的依赖关系,然后经过一系列的过程(压缩、合并),最终生成运行时态的文件。webpack的特点:为前端工程化而生:webpack致力于解决前端工程化,特别是浏览器端工原创 2020-08-21 16:22:26 · 323 阅读 · 0 评论 -
webpack-浏览器端实现模块化
浏览器端实现模块化一、浏览器端的模块化2.根本原因3.解决办法4.常见的构建工具一、浏览器端的模块化问题:效率问题:精细的模块划分带来了更多的JS文件,更多的JS文件带来了更多的请求,降低了页面访问效率兼容性问题:浏览器目前仅支持ES6的模块化标准,并且还存在兼容性问题工具问题:浏览器不支持npm下载的第三方包这些仅仅是前端工程化的一个缩影当开发一个具有规模的程序,你将遇到非常多的非业务问题,这些问题包括:执行效率、兼容性、代码的可维护性可扩展性、团队协作、测试等等等等,我们将这些问题称之原创 2020-08-21 11:41:58 · 401 阅读 · 0 评论