随笔分类 -  webpack

webpack
webpack优化之玩转代码分割和公共代码提取
摘要：前言 开发多页应用的时候，如果不对webpack打包进行优化，当某个模块被多个入口模块引用时，它就会被打包多次（在最终打包出来的某几个文件里，它们都会有一份相同的代码）。当项目业务越来越复杂，打包出来的代码会非常冗余，文件体积会非常庞大。大体积文件会增加编译时间，影响开发效率；如果直接上线，还会拉长 阅读全文
posted @ 2020-12-16 11:22 飞奔的龟龟 阅读(769) 评论(0) 推荐(0)
【webpack系列】从零搭建 webpack4+react 脚手架（五）
摘要：本章节，我们一起来探讨以下问题：如何对编译后的文件进行gzip压缩，如何让开发环境的控制台输出更加高逼格，如何更好的对编译后的文件进行bundle分析等。 1 gzip压缩 如果你想节省带宽提高网站速度，压缩是一种简单有效的方法。我们模拟一次html的请求，想象一下浏览器和服务器的对话： 浏览器：嘿 阅读全文
posted @ 2019-01-06 16:43 飞奔的龟龟 阅读(1207) 评论(0) 推荐(1)
【webpack系列】从零搭建 webpack4+react 脚手架（四）
摘要：经过三个章节的学习，你已经学会搭建了一个基于webpack4的react脚手架。如果要更改配置，比如，你希望把编译后的js文件和css文件等单独放dist下的static目录下，你想想，是不是有点麻烦。你要去浏览webpack的配置文件，找到哪些配置项，然后去更改它，我们希望有个参数配置文件，只要更 阅读全文
posted @ 2019-01-06 16:29 飞奔的龟龟 阅读(1285) 评论(0) 推荐(0)
【webpack系列】从零搭建 webpack4+react 脚手架（三）
摘要：本章节，我们对如何在脚手架中引入CSS，如何压缩CSS，如何使用CSS Modules，如何使用less，如何使用postcss等问题进行展开学习。 1 支持css （1）在app目录，新建一个css，命名为index.css，输入样式： h1{ display: flex; height: 200 阅读全文
posted @ 2019-01-06 16:09 飞奔的龟龟 阅读(905) 评论(0) 推荐(0)
【webpack系列】从零搭建 webpack4+react 脚手架（二）
摘要：html文件如何也同步到dist目录？bundle.js文件修改了，万一被浏览器缓存了怎么办？如何为导出的文件加md5？如何把js引用自动添加到html？非业务代码和业务代码如何分开打包？如何搭建开发环境？如何实现开发环境的热更新？ 在上一节我们已经搭建了一个最基本的webpack环境， 这一节我们 阅读全文
posted @ 2019-01-06 15:49 飞奔的龟龟 阅读(995) 评论(0) 推荐(0)
【webpack系列】从零搭建 webpack4+react 脚手架（一）
摘要：搭建一个React工程的方式有很多，官方也有自己的脚手架，如果你和我一样，喜欢刨根究底，从零开始自己一行一行代码创建一个React脚手架项目，那你就来对地方了。本教程是针对React新手，以及对webpack还不熟悉的用户，或者是想了解当前前端工程化方案的用户。我会在整个系列通过webpack4的配 阅读全文
posted @ 2019-01-06 15:28 飞奔的龟龟 阅读(1584) 评论(0) 推荐(0)