摘要： Webpack与浏览器缓存 在 web 开发中，我们应该充分利用 HTTP 协议和浏览器的缓存来做好页面代码的持久化缓存，本文将介绍如何合理配置 Webpack 来更好的提升应用持久化缓存策略，通过将资源缓存在客户端中，可以避免之后每次都重新下载。 浏览器缓存策略和 Webpack 缓存相关配置 使 阅读全文

摘要： Visual Studio注释代码段快捷键 默认注释快捷组合键 注释： Ctrl+K → 选定需要注释的代码段 →Ctrl+C 取消注释： Ctrl+K → 选定需要取消注释的代码段 →Ctrl+U 本小节 Webpack 相关面试题： 怎么使用 PostCSS 来处理 CSS； 你会在 Webpa 阅读全文

摘要： 通过Import去异步的加载这个模块，但是到底什么时候去加载这个模块，实际上是不一定的，要看自己的代码怎么写; 好处是：加载速度会快； 比如说我们现在的打包后的目录： 我们运行程序 //index.js文件中 async function getComponent() { //import这种语句返 阅读全文

摘要： 使用Webpack的splitChunks功能来拆分代码 Webpack 代码拆分方式 在Webpack中，总共提供了三种方式来实现代码拆分（Code Splitting）： Entry配置：通过配置多个entry文件来实现； 动态加载（按需加载）：通过写代码时主动使用import()或者requi 阅读全文

摘要： Development开发环境和production生产环境的区分打包 在实际开发实践中，为了方便开发调试和上线，项目中我们一般配置两个webpack配置，一个是开发环境一个是生产环境，开发环境帮助我们快速开发测试连调，生产环境保证上线环境的打包流程是最优化体验，这就是配置文件根据环境进行区分。 配 阅读全文

摘要： 什么是 Tree-Shaking？ Tress-Shaking是一个前端术语，本意为摇树的意思，在前端术语中通常用于描述移除JavaScript上下文没用的代码，这样可以有效地缩减打包体积； 怎么在 Webpack 中做 Tree-Shaking？ Tree-Shaking关注于消除没有用到的代码； 阅读全文

摘要： 使用webpackDevServer提升开发效率 /*开启一个web服务器*/ "start": "webpack-dev-server" devServer:{ contentBase:'./dist', open:true,//运行npm run start 自动的帮你打开一个浏览器 port: 阅读全文

摘要： Loader是什么？ Loader配置 Loader是解析处理器，通过loader我们可以将ES6语法的JS转化为ES5的语法，可以将图片转化为base64的dataURL，在JavaScript文件中直接import css和HTML也是通过对应的loader来实现的。 我们在使用loader之前 阅读全文

摘要： 基础概念和常规配置项的介绍webpack.config.js 配置文件webpack是可配置的模块打包工具，我们可以通过修改Webpack的配置文件（webpack.config.js）来对webpack进行配置，webpack的配置文件是遵循Node.js的CommonJS模块规范的，即： 通过r 阅读全文

摘要： 每日一积累 Webpack的插件 使打包的方式更方便便捷 插件：html-webpack-plugin 1：安装：cnpm install html-webpack-plugin –D 2：在webpack自定义配置文件webpack.config.js中引入这个插件 const HtmlWebpa 阅读全文