随笔分类 - webpack
打包工具
摘要：原理学习 这个过程发生了什么？ 开始:从 webpack 命令行说起 通过 npm scripts 运行 webpack 开发环境: npm run dev 生产环境:npm run build 通过 webpack 直接运行 webpack entry.js bundle.js 查找 webpac
阅读全文
摘要：初级分析:使用 webpack 内置的 stats stats: 构建的统计信息 package.json 中使用 stats "script": { "build:stats": "webpack --env production --json > stats.json" }, Node.js 中
阅读全文
摘要：以后公司前端新项目 webpack 可以选择使用这一套通用配置，该配置满足了一下诸多功能。 使用者可以自己定义一些 loader 以及 plugin 以满足日常开发需要，在下面给出详细的注释以便理解与使用。（开发时可以把注释删掉） - webpack.base.js // webpack.base.
阅读全文
摘要：构建配置抽离成 npm 包的意义 通用性 业务开发者无需关注构建配置 统一团队构建脚本 可维护性 构建配置合理的拆分 README 文档、changeLog 文档等 质量 冒烟测试、单元测试、测试覆盖率 持续集成 构建配置管理的可选方案 通过多个配置文件管理不同环境的构建，webpack --con
阅读全文
摘要：webpack 日志优化 当前构建时的日志显示 展示⼀大堆日志，很多并不需要开发者关注 统计信息 stats Preset Alternative Description "errors-only" none 只在发生错误的时候输出 "minimal" none 只在发生错误或者有新的编译的时候输出
阅读全文
摘要：前端应用服务端渲染 面向消费者、面向用户的前端应用程序，使用 ssr 是很有必要的。 作为消费者，在使用前端应用程序的时候，页面打开过程大概是以下几个步骤。 开始加载（白屏) → HTML 加载成功，开始加载数据（这个时候会有提示，短视频加载中） → 数据加载成功，渲染成功开始， 加载图⽚片资源 →
阅读全文
摘要：代码规范 ESLint 的必要性 2017年4⽉13日，腾讯⾼级⼯程师小明在做充值业务时，修改了苹果 iap ⽀付配置，将 JSON 配置增加了重复的 key 。代码发布后，有小部分使用了 vivo 手机的用户反馈充值页面白屏，无法在 Now app 内进行充值。最后问题定位是: vivo ⼿机使用
阅读全文
摘要：代码分割 代码分割的意义 对于大的 Web 应用来讲，将所有的代码都放在一个文件中显然是不够有效的，特别是当你的某些代码块是在某些特殊的时候才会被使用到。webpack 有一个功能就是把你的代码库分割成 chunks（语块），当代码运行到需要它们的时候再进行加载。 适用的场景 抽离相同代码到一个共享
阅读全文
摘要：webpack 打包闭包优化 现象：构建后的代码存在大量闭包代码 会导致什么问题？ 大量函数闭包包裹代码，导致体积增大（模块越多越明显） 运行代码时创建的函数作用域变多，内存开销变大。 模块转换分析 结论 被 webpack 转换后的模块 会带上一层包裹 import 会被转换成__webpack_
阅读全文
摘要：树摇——性能优化 性能优化的关键步骤，已在 webpack4.0 里默认支持 概念 一个模块可能有多个方法，只要其中的某个⽅法使⽤用到了了，则整个文件都会被打到 bundle ⾥面去，tree shaking 就是只把用到的⽅方法打入 bundle ，没用到的方法会在 uglify 阶段被擦除掉。
阅读全文
摘要：基础库分离 思路路:将 react、react-dom 基础 包通过 cdn 引⼊入，不不打⼊入 bundle 中 ⽅方法:使⽤用 html-webpack- externals-plugin const HtmlWebpackExternalPlugin = require('html-webpa
阅读全文
摘要：使用 source map 来帮助你进行本地开发，算是前端开发利器之一了 使用 source map 作用:通过 source map 定位到源代码 · source map科普⽂文:http://www.ruanyifeng.com/blog/2013/01/javascript_source
阅读全文
摘要：说白了就是使用正则，把对应的 entry 匹配出来，然后对应生成对应的 htmlWebpackPlugins，到最后丢到插件里面。 多页面应用（MPA）概念 每一次页面跳转的时候，后台服务器都会返回一个新的 html 文档。 这种类型的⽹网站也就是多⻚页⽹网站，也叫做多页面应用。 多⻚页⾯面打包基本
阅读全文
摘要：资源内联 webpack 也太迷了 把字体、图片等资源内联到代码里面去 上报相关的一些点，比如 pagestart、css 初始化、css 初始化完成、js初始化、js 初始化完成。 这些都一般内联到 html 里面去，而不是单个文件上报 资源内联的意义 代码层面： 页面框架的初始化脚本 上报相关打
阅读全文
摘要：CSS px to rem 分辨率不同 浏览器的分辨率都是不一样的 过去 在过去，我们都是靠媒体查询来实现响应式布局 这里有个缺陷，就是需要写多套匹配样式的代码 @media screen and (max-width: 980px) { .header { width: 900px; } } @m
阅读全文
摘要：webpack 自动补齐 CSS 样式 autoprefixer 自动补齐 CSS3 前缀 CSS3 的属性为什么需要前缀？ 浏览器标准不统一，目前来看。 举个例子 .box { -moz-border-radius: 10px; -webkit-border-radius: 10px; -o-bo
阅读全文
摘要：自动清理构建目录产物 当前构建时的问题 每次构建的时候都不会清理目录，造成构建的输出目录 output 文件越来越多 rm -rf ./dist && webpack rimraf ./dist && webpack 方法有点笨 自动清理构建目录 避免构建前每次需要手动删除 dist npm ins
阅读全文
摘要：HTML CSS 和 JS 的代码压缩 1. HTML 压缩 html-webpack-plugin，这是一个非常强大的插件 安装 npm install html-webpack-plugin -D 修改 html-webpack-plugin，然后设置压缩参数 "use strict"; //
阅读全文
摘要：文件指纹 什么是文件指纹？ 文件指纹指的是打包后输出的文件名的后缀。 文件指纹如何生成？ Hash：和整个项目的构建相关，只要项目文件有修改，整个项目构建的 hash 值就会更改。 Chunkhash：和 webpack 打包的 chunk 有关，不同的 entry 会生成不同的 chunkhash
阅读全文
摘要：1. webpack中的文件监听 文件监听是在发现源码发生变化时，自动重新构建出新的输出文件。 webpack 开启监听模式，有两种方法： 启动 webpack 命令时，带上--watch 参数 在配置 webpack.config.js 中设置 watch：true { "name": "hell
阅读全文
浙公网安备 33010602011771号