为了提高React应用的启动速度、离线访问能力, 做到页面能离线启动、service worker能在后台默默更新本地缓存的页面、数据的版本，并且做到监控版本更新能力的靠谱性。 终极方案：采用serviceWorker的成熟方案workBox通过Webpack的workbox官…

13. 配置 打包输出路径 14. 配置 静态资源发布路径（方便CDN请求资源） 15. 配置 打包文件缓存 hash 16. 打包前 自动清除文件 clean-webpack-plugin 17. 根据查找规则 精简打包 18. 打包时 代码分割 19. 使用 HappyPa…

npm i -D 是 npm install --save-dev 的简写，是指安装模块并保存到 package.json 的 devDependencies中，主要在开发环境中的依赖包. 如果使用webpack 4+ 版本，还需要安装 CLI。 非全局安装下的打包。 webp…

webpack4的cli(command line interface)已经移动到webpack-cli了，如果要使用CLI,你需要安装webpack-cli，具体使用可以查看webpack-cli的文档。 由于Babel默认只转换新的JavaScript句法（syntax），…

package.json里存放着当前项目的相关信息，包含 版本号，开发者，开发环境依赖，生产环境依赖，在这里我们重点关注 scripts， webpack构建命令在这里配置。 引入并调用该插件。执行npx webpack命令。则会帮你在dist目录，自动创建相应的html和js…

本文教你如何用代码表达对自己的生日快乐之祝福或者对女孩的爱慕之情，具体如何应用大家可以发散思维，例如情人节给暗恋的女孩发一个 JS 文件过去表白，或者是清明节的时候用代码烧个香，祭奠死去的爱情之类的。 直接看效果吧。 要自己压缩出这样的代码其实很简单，使用 js2image 这…

上篇讲了首屏优化，具体文章详见移动spa商城优化记（一）---首屏优化篇，这次来分享一下打包速度的一些优化经验，因为在实际项目开发中，随着项目的不断增大，依赖项不断增多，我们会发现webpack打包速度会越来越慢，有时候npm run一下可能出去上个厕所的时间都够了，在这快速发…

webpack前端工程中扮演的角色越来越重要，它也是前端工程化很重要的一环。本文将和大家一起按照项目流程学习使用wbepack，妈妈再也不用担心我不会使用webpack，哪里不会看哪里。这是一个由浅入深的文章。 现在vue、react等脚手架都会自动将开发环境使用的webpac…

上下会初始化一个项目，接下来添加webpack4. 确定装的webpack版本是4. 保存之后，npm run dev会出现一个错误. 两个问题，第一个出错的意思是说，没有设置mode,默认会认为是production模式。第二个是说src下没有找到入口模块。 在项目下新建sr…