冰魂魄的博客

1：是什么preloading：设置这个指令，就会在当前的页面中，以较高优先级预加载某个资源。其实就相当于浏览器的预加载，但是浏览器的预加载只会加载html中声明的资源，但是preloading突破了这个限制，连css和js资源也可以预加载一波。Prefetching：设置这个指令，就表示允许浏览器在后台（空闲时）获取将来可能用得到的资源，并且将他们存储在浏览器的缓存中。这两种其实都是webpack提供的资源加载优化的方式，反正如果就是设置了这几个指令，就会先走个http的缓存，然后下次再次请求的

代码分割本身和 webpack 没有什么关系，但是由于使用 webpack 可以非常轻松地实现代码分割，所以提到代码分割首先就会想到使用 webopack 实现。在 webpack 中是使用SplitChunksPlugin来实现的，由于SplitChunksPlugin配置参数众多，接下来就来梳理一下这些配置参数官网上的默认配置参数如下：module.exports = { //... optimization: { splitChunks: { chun...

webpack-merge随着我们业务逻辑的增多，图片、字体、css、ES6以及CSS预处理器和后处理器逐渐的加入到我们的项目中来，进而导致配置文件的增多，使得配置文件书写起来比较繁琐，更严重者（书写特定文件的位置会出现错误）。更由于项目中不同的生产环境和开发环境的配置，使得配置文件变得更加糟糕。使用单个的配置文件会影响到任务的可重用性，随着项目需求的增长，我们必须要找到更有效地管理配置文件的方法。安装webpack-mergenpm install webpack-merge -D2

tree shaking是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如import和export通俗一点解释就是：当我引入这个模块的时候 我不引用这个模块的所有代码 我只引入它需要的代码好处：主要的决定因素是应用程序中死代码的数量。如果你没有多少死代码，那么你就看不到 tree-shaking 的多少好处。什么是死代码很简单：就是 Webpack 没看到你使用的代码。Webpa...

介绍下 webpack 热更新原理，是如何做到在不刷新浏览器的前提下更新页面当修改了一个或多个文件 文件系统接收更改并通知webpack webpack重新编译构建一个或多个模块，并通知HMR服务器进行更新 HMR Server 使用webSocket通知HMR runtime 需要更新，HMR运行时通过HTTP请求更新jsonp HMR运行时替换更新中的模块，如果确定这些模块无法更新，则触发整个页面刷新如何利用webpack来优化前端性能？（提高性能和体验）压缩代码：删除多余的代码、注释

在开发中，我们都可以发现仅仅使用Webpack以及它的命令行工具来进行开发调试的效率并不高,每次编写好代码之后，我们需要执行npm run build命令更新js文件，然后再刷新页面，才能看到更新效果。webpack-dev-server正好解决了这个问题，是一款便捷的本地开发工具。module.exports = { devServer:{ contentBase:resolve(__dirname,'build'), // 项目构建后路径 watchCont

配置devtool此选项控制是否生成，以及如何生成 source map。当页面代码出现错误的时候 我们通常会点击右侧看看代码哪里出错了 这是打包后main.js内的代码 我们希望代码写错的时候 告诉我们的是源代码哪里出了问题总结一下：SourceMap是一种映射关系。当项目运行后，如果出现错误，错误信息只能定位到打包后文件中错误的位置。如果想查看在源文件中错误的位置，则需要使用映射关系，找到对应的位置。const path = require(...

webpack本质上，webpack是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。entry入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间..