小洋人最happy的专栏

文章目录一、CSS处理1.1 单独文件1.1.1 安装依赖1.1.2 配置1.1.3 测试1.2 兼容处理1.2.1 安装依赖1.2.2 配置1.2.3 控制兼容性1.2.4 测试1.3 压缩1.3.1 安装依赖1.3.2 配置1.3.3 测试二、HTML处理2.1 压缩一、CSS处理1.1 单独文件css文件目前被打包到js文件中，当js文件加载时，会创建一个style标签来生成样式这样对于网站来说，会出现闪屏现象，用户体验不好我们应该是单独的css文件，通过link标签加载性能才好1.1.1

文章目录一、Preload/Prefetch1.1 为什么1.2 是什么1.2.1 共同点：1.2.2 区别：1.2.3 问题1.2.4 总结1.3 怎么样1.3.1 安装依赖1.3.2 配置1.3.3 测试二、Network Cache2.1 为什么2.2 是什么2.3 怎么用2.3.1 问题2.3.2 原因2.3.3 解决三、core-js3.1 为什么3.2 是什么3.3 怎么用3.3.1 修改代码3.3.2 配置eslint3.3.3 测试3.3.4 使用core-js3.3.4.1 手动全部引入3

文章目录1.1 为什么1.2 是什么1.3 怎么用1.3.1 多入口打包1.3.1.1 文件目录1.3.1.2 安装依赖包1.3.1.3 新建文件1.3.1.4 配置1.3.1.5 测试1.3.1.6 小结1.3.2 提取重复代码1.3.2.1 修改文件1.3.2.2 修改配置文件1.3.2.3 测试1.3.3 按需加载，动态导入1.3.3.1 修改文件1.3.3.2 测试1.3.4 单入口1.3.5 更新配置1.3.6 给动态导入文件取名称1.3.6.1 修改文件1.3.6.2 统一命名配置1.3.6.3

文章目录一、Tree Shaking1.1 为什么1.2 是什么1.3 怎么用二、Babel2.1 为什么2.2 是什么2.3 怎么用2.3.1 安装依赖2.3.2 配置三、Image Minimizer3.1 为什么3.2 是什么3.3 怎么用3.3.1 安装依赖3.3.2 配置3.3.3 测试一、Tree Shaking1.1 为什么开发时我们定义了一些工具函数库，或者引用第三方工具函数库或组件库。如果没有特殊处理的话我们打包时会引入整个库，但是实际上可能我们可能只用上极小部分的功能。这样将整

文章目录一、HotModuleReplacement1.1 为什么1.2 是什么1.3 怎么用1.3.1 基本配置1.3.2 JS配置二、OneOf2.1 为什么2.2 是什么2.3 怎么用三、Include/Exclude3.1 为什么3.2 是什么3.3 怎么用四、Cache4.1 为什么4.2 是什么4.3 怎么用五、Thread5.1 为什么5.2 是什么5.3 怎么用5.3.1 获取CPU核数5.3.2 安装依赖5.3.1 使用六、小结6.1 效果6.2 完整配置文件一、HotModuleRep

文章目录1. 为什么2. 是什么3. 怎么用3.1 开发模式3.3 生产模式1. 为什么开发时，我们运行的代码是经过webpack编译后的，如果出现问题， 定位会比较麻烦，比如下面main.js中有一个错误：const result = sub(10, 5);console.log(result);console.log(result.reduce());在项目运行时，查看报错信息：所有css和js合并成了一个文件，并且多了其他代码。此时如果代码运行出错那么提示代码错误位置我们是看不懂的

一、简介前面介绍过，在webpack.config.js的mode配置中有development和production两个选项，那有什么区别呢？本篇文章就简单介绍下。二、开发模式2.1 简介开发模式(mode: development)顾名思义就是我们开发代码时使用的模式。这个模式下我们主要做两件事：编译代码，使浏览器能识别运行开发时我们有样式资源、字体图标、图片资源、html资源等，webpack默认都不能处理这些资源，所以我们要加载配置来编译这些资源代码质量检查，树立代码规范

文章目录一、简介二、Eslint2.1 简介2.2 配置文件2.3 具体配置2.3.1 parserOptions解析选项2.3.3 rules规则2.3.4 extends继承2.4 使用2.4.1 安装依赖2.4.2 定义Eslint配置文件2.4.3 配置Eslint插件2.4.4 测试2.5 VSCode ESLint插件三、Babel3.1 简介3.2 配置文件3.3 具体配置3.3.1 presets 预设3.4 安装依赖3.5 webpack配置文件3.6 测试一、简介有人可能会问，js资

文章目录一、简介二、处理CSS资源2.1 添加CSS2.2 下载loader2.3 配置2.4 运行指令三、处理LESS资源3.1 添加less资源3.2 下载loader3.3 配置3.4 运行指令四、处理LESS资源4.1 添加sass/scss资源4.2 下载loader4.3 配置2.4 运行指令五、处理Styl资源5.1 添加styl资源2.2 下载loader4.3 配置2.4 运行指令一、简介Webpack本身是不能识别样式资源的，所以我们需要借助 Loader来帮助Webpack解析样式

文章目录一、前言1.1 为什么需要打包工具1.2 有哪些打包工具二、基本使用2.1 简介2.2 基础使用2.2.1 资源目录2.2.2 创建文件2.2.3 下载依赖2.2.4 启用Webpack2.2.4.1 开发模式2.2.4.2 生产模式2.2.5 观察输出文件2.3 小结三、基本配置3.1 五大核心概念3.2 编写Webpack 配置文件3.3 运行指令3.3 小结一、前言1.1 为什么需要打包工具简单来说，在开发中，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass