- 博客(26)
- 收藏
- 关注
RSS订阅原创 webapck优化-coreJS解决JS兼容性问题（21）
babel使用智能预设确实能解决一些ES6语法向ES5转换，但是像promise，include等语法Babel是无法解决，一旦遇到低版本浏览器，可能会报错。core-js是专门用来解决ES6及以上的API的polyfill。polyfill是补丁的意思，就是社区上提供的一段代码，让我们在不兼容某些新特性的浏览器上能够使用新特性。下载完成在babel.config.js文件中进行配置就可以实现按需加载，无需整个引入core-js文件。presets: [
2024-03-01 18:02:11
657
原创 webpack优化-压缩图片（20）
当项目本地的图片比较多的时候，为了减少打包的体积，需要将本地的图片进行压缩，不过线上请求的图片就不需要压缩了。还有包需要下载，两种二选一，一种有损压缩，一种无损压缩。
2024-03-01 17:09:47
472
原创 webapck优化-减少Babel的体积（19）
Babel为编译的每个文件都插入辅助代码，对一些公用的方法使用了非常小的辅助代码，比如_extend,默认情况下会被插入每个需要的文件，使代码体积越来越大。我们可以将babel runtime作为成为单独的模块，需要的文件按需引入即可，避免重复引用。【babel runtime是Babel提供的工具库，提供一些常用的函数和对象，帮助开发者兼容性问题等】实现babel runtime成为独立模块。
2024-03-01 11:04:44
372
原创 webpack优化-多进程打包（18）
项目比较大时，一般JS代码也会比较多，而且S代码得经过eslint、Babel和Terser（这个是生产模式下默认对Js文件打包的工具，是webpack默认的配置，无需我们自己配置）三个工具的处理。要想提高项目的打包速度，就得提高它们的运行速度。但是每开启多一个进程就会耗费600ms左右，所以只有在特别耗时的操作中才使用多进程，否则只会让速度更加缓慢。项目比较大，JS文件比较多，打包比较慢的情况下才需要开启多进程。开发模式、生产模式都可以使用。多进程打包是指开启多个进程同时处理一件事情，速度会比较快。
2024-02-29 22:54:05
592
原创 webpack优化-eslint和babel缓存（17）
webpack处理样式资源都比较快，大多时间都是耗在处理JS代码中，也就是babel编译和eslint检查这两个步骤，每次编译打包都要重新处理一边，如果能够缓存Babel的处理结果和eslint的检查，下次修改只需要对修改的文件进行eslint的检查和Babel的处理，这样就可以节省很多时间。1、缓存Babel的处理结果在babel的配置options中设置缓存属性test: / \ .js$/,//匹配js文件//排除node_modules文件，这里的内容是处理已经好的，无需重复处理，加大工作量。
2024-02-29 18:00:50
363
原创 webpack优化-OneOf减少loader遍历（16）
webpack中配置了很多loader，处理样式、JS、其他资源等，每次遇到资源，都要在rules中一个一个的匹配loader，即使找到对应的loader还是往下匹配，直到匹配完所有的loader，我们一般只会匹配一个loader，所有这样比较浪费时间。而webpack中module的规则中，提供了一个rule条件判断oneOf，只取第一个匹配到的loader，剩下的就不在遍历了，这样提高了编译效率。oneOf的基本使用// 加载器module: {rules: [oneOf: [
2024-02-29 17:25:26
380
原创 webpack优化-HMR（15）
webpack5其实默认已经开启了HMR模式，是在devServer属性中配置的,默认开启状态，但是只支持样式文件热模块替换，当JS模块发生改变改变时，还是会重新加载整个页面，可以自己设置hot:false进行对比。HotModuleReplacement简称HMR，在程序运行中，替换、添加、删除模块，无需加载整个页面。当我们开发代码时，修改某一小部分代码，webapck会默认从入口文件开始，对整个项目进行打包，这样一旦代码多起来，编译和打包速度就会很慢，很费时间，拖延开发进度。
2024-02-29 13:24:28
274
原创 webpack优化-sourceMap（14）
开发环境下，当项目报错时，打开开发工具，还能找到错误点但是生产环境下，代码经过压缩，要是代码多一点，根本看不出哪里错了而webpack提供了一种技术方案sourceMap，它是一种实现映射的技术方案，它将压缩前的代码和压缩后的实现行和列的映射，当发生错误时，可以通过压缩代码的报错点找到对应压缩前的位置，这样压缩后的代码即使报错也可以清楚的找到具体的位置了。
2024-02-29 12:42:06
428
原创 webpack（13）处理样式兼容问题和压缩css文件
之前处理了JS的兼容问题，将高级语言转换成浏览器能识别的语言，同样的，在不同的浏览器，甚至不同版本的浏览器的之间样式也会存在兼容性的问题，现在我们就来解决样式的兼容性问题。1、下载依赖,postcss-loader依赖于postcss，postcss-loader需要使用postcss-preset-env来进行智能预设，决定样式如何进行兼容。2、基本使用，postcss-loader需要在css-loader的下一层，less-loader和scss-loader的上一层，顺序不能弄错。
2024-02-28 22:39:34
936
原创 webpack（12）提取css成为单独文件
之前webapck打包样式文件时，都是先将less、scss等先转成css，然后转成js代码，再将其插入style标签中，所以当网速差的时候，刷新网页一开始没有样式，得等js文件加载完成才会有样式，可能会出现闪频现象，用户体验不好。webapck提供了一个可以将css文件单独提取出来的插件:MiniCssExtractPlugin1、下载插件2、在webpack配置文件引入插件，并使用//
2024-02-28 15:30:43
502
原创 webpack（11）区分开发配置和生成配置
项目总要上线，开发时候的配置不一定符合生产时候的配置，这时就要两套配置。1、根目录下面创建config文件夹，存放两套配置2、webpack.dev.js的配置，相对路径相对的是根目录，所以即使有上一层，也不会改变，但是绝对路径要加上上一层config,开发模式不需要输出dist文件夹，可以去掉path和clean的配置。//node.js核心模块之一，路径模块//引入eslint插件//引入HTML插件// 1、入口文件路径，相对路径。
2024-02-28 14:05:41
281
原创 webpack（10）搭建开发服务器
开发时，每次代码修改都要重新手动打包才可以看到最新代码的效果，很不方便，如果能够自动检测代码变动，并自动打包，更新浏览器，就很好了。webpack提供了开发服务器“devServer”，加上这个配置，就可以实监测src文件内的代码，只要改变，就可以实现自动更新视图的目标了。不过开发服务器并不会输出dist内容，只是更新了内存。1、下载依赖2、webpack配置文件加上开发服务器的配置，配置和input同级3、启动开发服务器。
2024-02-28 11:03:21
418
原创 webpack（9）处理html资源
webpack打包好的入口文件还需要手动引入html文件中，当有多个或者有引入的文件有依赖性就不够简便，这时需要一个能够处理HTML文件的工具，能够帮助我们自动引入打包好的文件。webpack提供了处理HTML资源的插件HtmlWebpackPlugin。1、下载插件2、在webpack配置文件中引入插件和使用//引入HTML插件plugins: [ // plugins配置,插件一般是构造函数，需要使用new来创建实例// 传参是一个选项，里面可以设置一些需要的配置。
2024-02-27 21:44:58
379
原创 webpack（8）babel的介绍和基本使用
浏览器基本只能识别ES5语法，当比较高级的语法出现时，浏览器无法识别，需要打包工具先将代码编译成ES5语法，然后再在浏览器上运行。webpack本身无法将高级语法转换，需要通过babel-loader来实现，babel就是JS代码的编译器，通过babel可以将ES6、7、8、9等高级语法转换成浏览器可以识别的ES5语法。
2024-02-27 21:07:55
329
原创 webpack(7)eslint的了解和基本使用
当项目需要多人开发时，每个人写代码的习惯不一样，会造成代码各式各样，为了代码能够统一格式规范以及减少代码错误率，就需要使用类似eslint一样的代码格式配置工具。要想编写代码时就提醒语法错误，而不是编译时才报错，在vsCode下载插件eslint，就可以友好提示了。eslint只起检查代码的作用，所以最重要的的是eslint的配置文件，配置文件有几种格式：.【注意：这样打包会报错，提示没有eslint配置文件，没有配置文件，eslint就没有作用了】2、在根目录下面创建.eslintrc.js文件。
2024-02-27 18:32:42
293
原创 webpack字体图标资源处理和其他静态资源（6）
直接打包项目，字体图标的文件就会直接放入dist目录，所以需要自己配置需要将字体图标打包到相应的目录，使目录结构更加美观。
2024-02-27 10:46:34
455
原创 webpack（5）清空上次打包内容和修改输出文件目录
1、比如想要入口的js文件打包到dist目录下的js文件夹中，就在output的filename（输口文件路径前面加上js文件目录），如果在path配置那里改成’dist/js’，那所有的打包文件都会集中在dist/js目录下，这是输出文件的根目录。不同的文件全部打包到一个dist文件夹时，会显得很杂乱，不同内容打包到不同的文件夹就很有必要，让人一目了然，打包目录结构又很有层次感。每次打包开始前都要手动清空上次打包的内容，非常麻烦，webpack5有个参数可以设置自动清空上次打包的内容。
2024-02-26 13:39:03
614
原创 webpack图片处理（4）
webpack5有内置了图片的处理规则，webpack4时图片资源也是通过file-loader（将图片资源按照webpack能识别的样式原封不动的将图片）和url-loader（将图片转换成base64格式，这样可以图片不用请求网络，可以直接渲染）进行处理。url-loader的优缺点：优点：将图片转成base64，减少网络请求。缺点：图片转成base64后，会增加图片的大小，越大的图片转换后增加的约多。
2024-02-26 13:06:25
302
原创 webpack样式处理基本配置（3）
webpack只能处理JS、JSON资源，要想处理样式资源，需要借助loader来处理。webpack官网中有各种loader的使用介绍，下面进行各种样式资源的基本配置。
2024-02-07 12:06:51
727
原创 webpack的五个核心概念和基本配置（2）
打开终端运行：npx webpack，这个将会在项目根目录下找webpack.config.js文件，并根据该配置进行编译打包，successfully代表成功。plugins用来扩展webpack功能的插件，要想色设置比较复杂的打包配置，就需要plugins的协助。production - 生产模式，在开发模式的基础上，对编译的文件进行压缩和一定的优化。指定webpack打包后输出的文件的路径，打包后的文件可以有一个或者多个。指定webpack开始打包的文件路径的路径，入口文件可以是一个或者多个。
2024-01-16 22:49:24
710
原创 初识webpack5（1）
3、运行：npx webpack ./src/js/sum.js --mode development，npx webpack 表示将node module文件夹下面的bin目录添加为运行环境变量，这样可以访问该目录下的 webpack 运行程序，可以对sum.js进行生成模式的编译打包，最终输出在dist文件夹中。webpack是个静态打包工具，本身只支持JS文件的打包，它可以根据一个或者多个入口文件进行打包，然后输出一个或者多个编译后的文件，编译后的文件就是浏览器运行的文件。
2024-01-03 23:42:45
321
原创 ES７新增特性
之前也存在一个数组方法indexOf()，也是检测是否存在某个元素，并且返回元素的索引值，缺点是无法检测NaN类型，而includes()方法可以检测，不过无法返回元素所在位置的索引值。includes()方法是用来判断数组是否存在某个元素，存在则返回true，不存在则返回false。新增取幂运算符，简洁了运算代码的书写，例如：3**4相当于3。ES7是2016年发布的新特性。
2023-11-06 11:47:18
205
原创 webpack5的基本介绍
介绍webpack的5大核心概念webpack的基本使用和基本配置前言：为何项目为何需要打包工具呢，因为当项目中出现es6语法，less,sass语法等浏览器不能识别的语法时，需要使用打包工具将浏览器无法识别的语法转换成浏览器可以识别的语法，这样浏览器才能解析代码， 正常显示，而webpack就是目前比较受欢迎的打包工具之一。介绍：webpack是一个静态资源的打包工具，自身只支持JS、JSON文件的打包，如果需要处理其他类型的文件，比如es6语法、less文件等，
2023-10-15 13:50:02
82
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人