摘要：
多页面应用 MPA 多页面相对于单页面而言，多页面拥有多个入口，一个页面就是一个业务 单页面所有的业务都在一个url中，只不过后面的hash会发生变化 多页面应用的优势 每个页面之间相互解耦 对于seo更加友好 多页面打包思路 一般方案 每个页面对应一个entry以及html-webpack-plu 阅读全文
摘要：
关于资源内联 代码层面: 页面框架的初始化脚本 如flexible 上报相关打点 css、js的初始化以及加载完成的上报点的代码需要内联到html里面去 css内联避免页面闪动 首屏一般会内联css,避免页面闪动(代码层面的体验，初始化的内容) 请求层面 减少http请求 小图片或者字体内联(url 阅读全文
摘要：
前端页面适配 不同设备分辨率不一样，因此需要页面适配 前端如何做页面适配？ css媒体查询实现响应式布局 这种方式的缺陷就是需要编写多套适配样式代码 css3 rem单位 W3C对rem的定义: font-sise of the root Element. 即根元素的fontsize大小 rem: 阅读全文
摘要：
autoPrefix自动补齐CSS3前缀 关于CSS3属性前缀 浏览器很多种，浏览器标准没有完全统一。我们需要面对一些兼容性的问题 Trident (-md) IE系列 Geko (-moz) Webkit (-webkit) Presto (-o) 有些兼容问题是可以在构建阶段避免的，比如CSS3 阅读全文
摘要：
如何在每次构建之前自动清理构建目录 npm scipt结合rm rf清理 clean-webpack-plugin rm rf ./dist 这个方法其实并不优雅，可以用clean-webpack-plugin package.json { "script":"rm rf ./dist && web 阅读全文
摘要：
webpack代码压缩 js压缩 css压缩 html压缩 js压缩 webpack4内置了uglifyjs-webpack-plugin,在生产模式默认开启这个插件 所以我们默认打包的js文件以及是压缩过的 当然我们也可以手动安装一下这个插件并且手动设置一个参数 去做一些并行压缩之类的事情 css 阅读全文
摘要：
文件指纹 是什么？ 文件指纹就是打包输出后文件名的后缀 有什么用？ 文件指纹通常可以用来做一些版本管理，在发布的时候，有修改的文件就发布上去，没有修改的文件还可以继续用浏览器本地缓存，这样可以加速页面访问 文件指纹类型以及如何生成 文件指纹有三种类型 Hash Chunkhash Contentha 阅读全文
摘要：
Webpack中的文件监听 文件监听是在发现源码变化时，就自动构建生成新的输出文件 开启文件监听有两种方式 在启动webpack命令时，加上--watch参数 在webpack.config.js中，设置watch:true 1 watch参数 方式 配置script脚本 运行npm run wat 阅读全文
摘要：
Webpack解析图片 使用file-loader解析图片资源 在组件中引入并使用 Asset是图片的哈希 Asset Size Chunks Chunk Names 982163fc946587581278ea658d60e8e2.jpg 35.8 KiB [emitted] reactComp. 阅读全文
摘要：
Webpack 解析css css-loader: 加载css对象，并转换成commonjs对象 style-loader: 将样式写入style标签并插入到header中 安装loader npm i style-loader@0.23.1 css-loader@2.1.1 -D 配置webpac 阅读全文
摘要：
webpack解析ES6 webpack原生可以识别js，但不能识别ES6语法 因此需要借助babel-loader以及.babelrc配置文件 babel-preset是一系列babel plugin的集合 安装以下npm包 npm i @babel/core@7.4.4 @babel/prese 阅读全文
摘要：
Mode Mode 用于指定当前的构建环境是 production、development 还是 none 设置 mode 可以使用 webpack 内置的函数 mode 的默认值为 production 设置了 mode 之后会对应执行开发/生成环境具有的一些插件与功能，如果设置成 none,那么 阅读全文
摘要：
plugins 理念 plugins 与 loaders loaders: 处理 webpack 用来解析 webpack 不能转换的文件，主要作用是翻译 plugins: 用于 bundle 文件的优化、资源管理和环境变量注入，作用于整个构建过程，主要作用是增强 任何 loader 没办法做的事情 阅读全文
摘要：
loaders webpack 开箱即用，但是 webpack 只支持 js 和 json 文件类型，不支持其他的文件(比如 html,css,字体等) loader 可以支持其他文件类型并把它们转换成有效的模块，文件被 loaders 解析完之后才可以加到依赖图中 loader 本身是一个函数，接 阅读全文
摘要：
entry entry: 指定打包入口 理解依赖图 webpack是一个模块打包器 webpack把一切资源都当成模块 模块之间存在依赖关系 根据入口文件找到依赖，依赖之中又有依赖，所有依赖形成依赖树，将依赖文件加入依赖图 遍历完之后生成打包资源 单入口 entry的值是相对路径，总是相对于webp 阅读全文