随笔分类 -  webpack学习笔记

学习后的笔记总结，尽量转化为自己的理解
【webpack学习笔记】a08-缓存
摘要：一般要优化网站的加载速度可以从缓存入手，利用缓存可以降低网络流量，减少访问请求，从而可以达到加快访问速度的目的. 但是，如果一旦将文件缓存，那么有更新的时候就不能及时更新，若要看到最新内容，那么就需要清除缓存重新加载，这样加载速度就会很慢，达不到优化网站加载的目的。 解决的办法是添加版本号，也可以说 阅读全文
posted @ 2019-01-09 06:12 最懒猫 阅读(132) 评论(0) 推荐(0)
【webpack学习笔记】a07-代码分离
摘要：官方文档说进行代码分离有三种方法： 1. 入口起点：使用 配置手动分离。 2. 防止重复：使用 插件去重合分离chunk 注：在webpack4中， 已经被废弃，改用 3. 动态分离 但是在个人理解：2是对1的缺陷补充，所以其实就只有两种分离方法： 入口起点手动静态分离 动态分离 静态分离： ind 阅读全文
posted @ 2019-01-09 06:11 最懒猫 阅读(96) 评论(0) 推荐(0)
【webpack学习笔记】a06-生产环境和开发环境配置
摘要：生产环境和开发环境的配置目标不一样，生产环境主要是让文件压缩得更小，更优化资源，改善加载时间。 而开发环境，主要是要开发更方便，更节省时间，比如调试比如自动刷新。 所以可以分开配置不同的开发环境，然后需要哪种用哪种。 配置流程实践记录： 1. 新建项目文件夹 demo 2. 初始化 3. 安装 we 阅读全文
posted @ 2019-01-09 06:06 最懒猫 阅读(116) 评论(0) 推荐(0)
【webpack学习笔记】a05-模块热替换
摘要：什么是模块热替换？ 这个功能会在程序运行过程中替换、添加或删除模块，而无需重新加载整个页面 有什么用呢？ 保留在完全重新加载页面时丢失的应用程序状态. 只更新变更内容，以节省宝贵的开发时间。 调整样式更加快速 几乎相当于在浏览器调试器中更改样式。 总而言之，它最主要的速度就是加快开发速度。 启用模块 阅读全文
posted @ 2019-01-09 06:02 最懒猫 阅读(95) 评论(0) 推荐(0)
【webpack学习笔记】a04-建立开发环境
摘要：开发环境就是在开发过程中为了方便配置的环境，生产环境就是开发完成即将上线的情况。 好了，说了句废话，切入正题。 在开发时，打包后的文件压缩成一团，报错调试的时候傻眼了有木有？每次做出修改需要到浏览器查看效果的时候，都要手动 或者 手动进行打包，耗时又费劲有木有？ 用几个工具配置开发环境（不能用于生产 阅读全文
posted @ 2019-01-09 06:00 最懒猫 阅读(94) 评论(0) 推荐(0)
【webpack学习笔记】a03-管理输出
摘要：webpack 中输出管理主要运用了两个插件: html webpack plugin clean webpack plugin 这两个插件可以满足常规的输出管理需求。 会在输出目录创建一个全新的index.html（当然你也可以自己命名），将所有相关的bundle自动添加到html中，这样就可以不 阅读全文
posted @ 2019-01-09 05:50 最懒猫 阅读(97) 评论(0) 推荐(0)
【webpack学习笔记】a02-管理资源
摘要：在webpack 中，各种资源要引入，要用到 配置,比如css/图片/字体等等。 例如： 一般需要用的类型也就是 css样式、图片、字体、数据，可以借助一些loader或者插件加载优化这些资源。 加载css 加载css最常用到的是 和`style loader ExtractTextWebpackP 阅读全文
posted @ 2019-01-09 05:49 最懒猫 阅读(100) 评论(0) 推荐(0)
【webpack学习笔记】a01-基础构建
摘要：webpack基于nodejs环境运行，首先确认已经安装了node.js. 基础构建流程 1. 新建一个文件夹，这个就是你项目的根目录。 2. 在命令行中使用 命令初始化npm,会得到一个 ==package.json== 的文件。 3. 在命令行中安装webpack和webpack cli: 4. 阅读全文
posted @ 2019-01-09 05:46 最懒猫 阅读(131) 评论(0) 推荐(0)