- 博客(24)
- 收藏
- 关注
RSS订阅原创 【webpack5修行之道】第20篇: 环境配置mode
选项 描述 特点 development 会将porcess.env.NODE_ENV的值设为development。 启用NamedChunksPlugin 和 NamedModulesPlugin 能让代码本地调试运行的环境 production 会将process.env.NODE_ENV的值设为production。 启用FlagDependencyUsagePlugin， FlagIncludedChunksPl
2021-06-18 09:55:27
484
原创 【webpack5修行之道】第19篇: 详细介绍ouput
上一篇：一般来说需要配置path和filenamepath的作用是告诉webpack,将所有资源输出到哪个目录filename作用是输出js的文件名称修改webpack.config.js的output，如下output: { //输出的文件目录，所有资源输出的公共目录 path: resolve(__dirname, 'build'), //文件名称 filename: 'js/[name].[hash:10].js',}运行打包命令：npm r
2021-06-18 09:53:44
268
原创 【webpack5修行之道】第17篇：性能优化-dll打包
上一篇:【webpack5修行之道】第篇：性能优化-externalsdll打包是什么？有什么作用？node_modules会被打包为一个chunk文件，使用dll可以对某些库进行单独或组合进行打包，减少包的大小，在进行开发时，我们可以先进行node_modules的某些库进行dll打包，然后告诉webpack编译的时候不要打包这些文件了，也能提高编译速度在根目录下新建一个webpack.dll.js文件const {resolve} = require('path')const we.
2021-06-18 09:51:46
1344
原创 【webpack5修行之道】第16篇：性能优化-externals
上一篇：什么是externals？externals可以告诉webpack不打包资源，从而减少入口文件的大小，如果不打包某个包，又要用到他，这个时候需要从html的script标签进行引入，一般引入的是包的cdn资源配置externals的方法有多种： 具体查看webpack官网externals，本文仅对常用的三种方法做描述方法一：修改webpack.config.js，配置externalsconst { CleanWebpackPlugin } = require('clea
2021-06-18 09:50:57
1905
原创 【webpack5修行之道】第15篇：性能优化-多进程打包
上一篇：【webpack5修行之道】第篇：性能优化-多进程打包多进程打包是一把双刃剑，如果使用得当，他会大大提高编译速度，如果使用不当，那么编译速度反而会增加因为thread-loader多线程开启过程需要耗费时间大概为600ms，多线程之间的通信也会消耗时间一般我们项目中是js编译的时候比较慢，所以多进程打包一般也是和babel-loader一起配置首先安装包: npm install -D thread-loader我们先不配置多线程打包，进行编译： npm run buil..
2021-06-18 09:49:29
2250
原创 【webpack5修行之道】第14篇：性能优化-PWA
上一篇：PWA（Progressive Web App）是一种理念，使用多种技术来增强web app的功能，可以让网站的体验变得更好，能够模拟一些原生功能，能够离线访问。要使用PWA我们需要使用插件 workbox-webpack-plugin安装： npm install -D workbox-webpack-plugin修改webpack.config.jsconst { CleanWebpackPlugin } = require('clean-webpack-plug...
2021-06-18 09:48:52
442
原创 【webpack5修行之道】第13篇：性能优化-懒加载和预加载
上一篇：【webpack5修行之道】第篇：性能优化-懒加载和预加载懒加载修改index.html，添加一个按钮<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content.
2021-06-18 09:47:01
424
原创 【webpack5修行之道】第12篇：性能优化-代码分隔
上一篇： 【webpack5修行之道】第篇：性能优化-代码分隔修改webpack.config.jsconst { CleanWebpackPlugin } = require('clean-webpack-plugin')const HtmlWebpackPlugin = require('html-webpack-plugin')const MiniCssExtractPlugin = require('mini-css-extract-plugin')const { resolv.
2021-06-18 09:46:23
219
1
原创 【webpack5修行之道】第11篇：性能优化-treeshaking
上一篇我们讲到：【webpack5修行之道】第篇：性能优化-treeshaking那么什么是treeshaking呢？treeshaking就是树摇优化，就好比我们有用的代码是绿色的树叶，无用的代码（vscode提示是灰色的）是黄色的树叶，我们在打包的时候抱住树干使劲的摇，将黄色的树叶摇落下来，这个过程称为treeshaking怎么才能实现treeshaking呢？有两个前提：1. 使用esmodule语法2.开启mode = productionwebpack.confi.
2021-06-18 09:43:54
341
原创 【webpack5修行之道】第10篇：性能优化-缓存
上一篇：webpack.config.jsconst { CleanWebpackPlugin } = require('clean-webpack-plugin')const HtmlWebpackPlugin = require('html-webpack-plugin')const { resolve } = require('path')process.env.NODE_ENV = 'development'module.exports = { mode: 'developm
2021-06-17 16:07:20
448
原创 【webpack5修行之道】第9篇：性能优化-oneOf
上一篇我们讲到：由于loader的rules数组里配置的规则会在每个文件打包编译的时候都去匹配一次，如果多次匹配会做多次loader处理，这个在我们实际开发中一般是不存在的要解决这个问题我们需要使用oneOf之前我们的webpack.config.js如下const { CleanWebpackPlugin } = require('clean-webpack-plugin')const HtmlWebpackPlugin = require('html-webpack-plugin')
2021-06-17 16:06:27
463
2
原创 【webpack5修行之道】第8篇：性能优化-sourcemap
上一篇我们讲到：什么是sourcemap？sourcemap是源代码和编译后的代码之间映射关系的一个对象文件，我们开发环境和生成环境运行的代码其实都是编译后的代码，编译后的代码信息和源码是不一样的，如果出现代码错误，我们需要通过映射关系将错误信息准确的提示出来，能够便于调试怎么配置sourcemap呢修改webpack.config.js文件配置devtool: 'source-map'const { CleanWebpackPlugin } = require('clea...
2021-06-17 16:05:37
514
原创 【webpack5修行之道】第7篇：性能优化-HMR
HMRsourcemaponeOfcachetreeshakingcodeSplit下一篇：webpack5修行之道3-性能优化2
2021-06-17 16:04:15
330
原创 【webpack5修行之道】第6篇：webpack对js兼容性处理
上一篇我们讲了，这篇我们来讲一讲webpack对js的兼容性处理。我们使用babel-loader来处理js的兼容性问题，要使用babel-loader，需要安装： @babel/core和babel-loadernpm install -D babel-loader @babel-core修改webpack.config.js添加babel-loader后，我们再去index.js里写一点高级的语法写完以后我们编译： npm run build，然后去浏览器查看控制台，我
2021-06-17 16:02:28
1314
原创 【webpack5修行之道】第5篇：webpack对js语法检查
上篇我们讲了，这篇我们讲eslint 和 eslint-loader对js进行语法检查,先安装包： npm install --save-dev eslint eslint-loader修改webpack.config.js文件，添加eslint-loaderconst { resolve } = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const MiniCssExtractP.
2021-06-17 16:01:37
607
原创 webpack5修行之道4-webpack优化css处理及资源分类
上一篇：目录提取csscss兼容性处理：资源分类css分类:JS分类：图片分类：其他资源分类：提取css前面我们讲到，css不能被webpack处理，所以需要css-loader来进行翻译，css翻译的css字符串都被打包到了入口文件中了我们尝试编译上一篇的代码，然后去查看编译后js文件：可以看到，所有的css文件都在这个js文件中，如果这个发布到生产环境，会产生什么效果？1. 由于是js加载的时候才会动态插入样式到head里，会造成闪..
2021-06-17 16:00:30
393
原创 【webpack5修行之道】第3篇：webpack配置devServer
上一篇我们介绍了：webpack5修行之道3-webpack配置devServer前两篇文章的里将的代码修改后的方式是： 手动执行npm run build编译命令，然后去刷新浏览器，这种方式未免也太麻烦了吧？对的，webpack已经帮我们想到了，webpack提供了webpack-dev-server包老规矩先安装webpack-dev-servernpm install -D webpack-dev-server安装完毕后，修改webpack.config.js文件完整代.
2021-06-17 15:58:33
1379
1
原创 【webpack5修行之道】第2篇：webpack处理图片资源和其他资源
上篇文章中已经介绍了webpack如何处理css资源和less资源，文章地址：这篇我们介绍webpack怎么打包图片资源和其他资源：在介绍之前，我们先指出一点问题：我们的output输出始终都为built.js，浏览器会对静态资源进行缓存，下次打包的时候如果还为built.js在浏览器这边就需要强制刷新，每次打包都需要强制刷新，这个显然是不对的，用户可不知道什么时候去强制刷新浏览器为了解决这个问题，我们需要修改output.filename的配置const { resolve } =.
2021-06-17 15:57:01
2039
3
原创 【webpack5修行之道】第1篇： webpack基本概念、处理css+less
前言：由于小弟一直担任的是前端组长角色，工作中也一直在坚持做技术分享，但始终未做webpack相关的技术分享，直到有一天，一个前端小伙伴找到我，说他自己想学习webpack相关的知识，但找到的资料都很片面，所以想让我做有关webpack的技术分享。这篇文章主要还是学习至官网，基于我自己的理解而编写。如果有理解得不对的地方，请各位不吝赐教。概念：entry: 要打包的入口文件output: 打包后输出的配置loader: webpack默认只能识别js文件和json文件，load.
2021-06-17 15:54:57
545
原创 Angular 属性型指令 directive
1.使用命令创建指令 ng g d yourDirectiveName2.yourDirectiveName.directive.ts代码:import {Directive,ElementRef,HostListener,Input} from '@angular/core';@Directive({ selector:'[appHighlight]' })
2017-11-07 15:56:16
1360
原创 Angular2+ 双向数据绑定
我们经常需要显示数据属性，并在用户作出更改时更新该属性。在元素层面上，既要设置元素属性，又要监听元素事件变化。Angular 为此提供一种特殊的双向数据绑定语法：[(x)]。 [(x)]语法结合了属性绑定的方括号[x]和事件绑定的圆括号(x)。当一个元素拥有可以设置的属性x和对应的事件xChange时，解释[(x)]语法就容易多了。 下面的SizerComponent符合这
2017-11-07 15:53:34
8341
原创 Angular2+ 结构型指令
结构型指令的职责是HTML布局。 它们塑造或重塑DOM的结构，比如添加、移除或维护这些元素。像其它指令一样，你可以把结构型指令应用到一个宿主元素上。 然后它就可以对宿主元素及其子元素做点什么。结构型指令非常容易识别。 在这个例子中，星号（*）被放在指令的属性名之前。{{hero.name}}三个常用的内置结构型指令 —— NgIf、NgFor和NgSwitch.
2017-11-07 15:42:22
459
原创 typeScript 装饰器
装饰器是一种特殊类型的声明，它能够被附加到类声明，方法， 访问符，属性或参数上。 装饰器使用@expression这种形式，expression求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。例如，有一个@sealed装饰器，我们会这样定义sealed函数：function sealed(target) { // do something wit
2017-11-07 15:36:38
718
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人