小草莓的博客

总结起来，loader 用于处理模块的转换工作，而 plugin 则用于扩展 webpack 的功能，增加额外的构建任务。它们在 webpack 的配置文件中通过不同的配置项进行配置和使用。

允许在编译时创建配置的全局对象；(Webpack4 之后指定 mode 会自动配置)是一个 webpack 内置的插件，不需要安装。

① 使用 ES6（ES2015）模块语法中的 import 和 export 才可以触发这个机制；这是因为 tree shaking 只能在静态 modules 下工作。ECMAScript 6 模块加载是静态的，因此整个依赖树可以被静态地推导出解析语法树。所以在ES6中使用 tree shaking 是非常容易的。② 在项目的 package.json 文件中，添加 "sideEffects" 属性；③ 使用 mode 为 "production" 的配置项以启用更多优化项。

webpack 只支持对 js 文件打包，像 css、sass、png 等这些类型的文件的时候，webpack 则无能为力，这时候就需要配置对应的 loader 进行文件内容的解析。因为 loader 支持链式调用，链中的每个 loader 会处理之前已处理过的资源，最终变为 js 代码。当 webpack 碰到不识别的模块的时候，webpack 会在配置的中查找该文件解析规则。通过使用不同的 loader，我们能够调用外部的脚本或者工具，实现对不同格式文件的处理。关于 loader 的配置，我们是写在。

简单来说，Webpack 的主要功能是模块打包和代码分割，适用于现代前端框架；Grunt 和 Gulp 的主要功能是任务自动化，但不支持模块化开发，适用于传统的前端开发。但是在实际项目中，它们也可以结合使用，以实现更加高效的前端工作流程。webpack 与 grunt、gulp 是完全不同的两类工具。而现在主流的方式是用 npm script 代替Grunt、 Gulp，npm script同样可以打造任务流。

结论先行：webpack 是模块化构建工具，具有强大的 loader 和插件生态，适用于大型复杂项目的构建；rollup适用于基础库的打包，功能没有webpack 强大；parcel适用于简单的实验性项目，在公司真实项目一般不用；

webpack 是目前比较常用的模块打包工具，它能够很好地管理与打包开发中所用到的 HTML、 JavaScript 、CSS以及各种静态文件（图片、字体等）。使用 webpack 管理模块依赖，并编译输岀模块所需的静态文件，让开发过程更加高效。对于不同类型的资源， webpack 有对应的模块加载器。它会分析模块间的依赖关系，最后生成优化且合并后的静态资源。

/ 后端增加 CSRF 防御机制，对请求头 Origin/Referer 进行校验，开发模式下 devServer 的代理需要修改 Origin/Referer 规避校验。如果后端增加 CSRF 防御机制，对请求头 Origin/Referer 进行校验。2、修改 headers 中的 Origin 和 Referer 规避校验。排查 proxyTable 对象中配置的 target 是否正确。Host 和 Referer 是本地地址，若正确，那可能就是请求头的问题。重新启动项目，就正常了~~

1、下载和安装gnvm2、验证gnvm安装配置成功3、查询本地所有已安装的node版本4、安装指定版本node（本地安装）5、卸载本地指定版本node6、切换本地存在的任意node版本7、更新本地的node最新版本8、安装node对应的npm版本9、下载最新版的npm版本10、查看gnvm的配置11、查询 node 版本12、查询global、latest的node版本13、更换成淘宝镜像14、gnvm的功能简介15、Node.js 、gnvm、npm

1、不存在Node.js环境时，下载Node.js latest最新版本并设置为全局Node.js 。2、升级本地Node.js latest最新版本。3、查看本地Node.js global全局安装版本和latest最新版本。4、验证 .gnvmrc registry 正确性。5、本地不存在npm时，安装当前Node.js版本对应的npm版本。6、安装npm latest最新版本。7、Node多版本管理器gnvm切换node版本The process cannot access t

在yarn 或者 npm install 安装依赖的时候，报错：error An unexpected error occurred: "https://github.com/eligrey/FileSaver.js.git/info/refs?service=git-upload-pack: connect ETIMEDOUT 20.205.243.166:443解决办法：在C:\Windows\System32\drivers\etc路径下找到hosts 文件：打开该文件，

比如通过ES6+、TypeScript开发脚本逻辑，通过sass、less等方式来编写css样式代码。，项目维护性增强，支持不同种类的前端模块类型，统一的模块化方案，所有资源文件的加载都可以通过代码控制。处理应用程序时，它会在内部构建一个依赖图，此依赖图对应映射到项目所需的每个模块（不再局限。③ 监听文件的变化来并且反映到浏览器上，提高开发的效率。，提高性能，可维护性，解决浏览器频繁请求文件的问题。⑤ 将代码进行压缩、合并以及其他相关的优化。，提高效率，解决浏览器兼容问题。① 模块化的方式开发代码。

⑥ 输出资源：根据⼊⼝和模块之间的依赖关系，组装成⼀个个包含多个模块的 Chunk，再把每个 Chunk 转换成⼀个单独的⽂件加⼊到输出列表，这步是可以修改输出内容的最后机会；④ 编译模块：从⼊⼝⽂件出发，调⽤所有配置的 Loader 对模块进⾏翻译，再找出该模块依赖的模块，再递归本步骤直到所有⼊⼝依赖的⽂件都经过了本步骤的处理；编译模块：从 Entry 入口文件出发，调⽤所有配置的 Loader 对模块进⾏翻译，再找到该模块依赖的模块，递归地进行编译处理。会被执行，这是我们修改最终文件的最后一个机会。

webpack的理解、webpack中loader的作用，常用 loader、webpack中常见的Plugin、Loader 和 Plugin 的不同、Webpack构建流程、source map、模块打包原理、文件监听原理、热更新原理、对 bundle体积进行监控分析、如何保证各个loader按照预想方式工作？如何优化 Webpack 的构建速度、代码分割、webpack解决的问题、webpack的能力

通过webpack优化前端的手段有：① JS代码压缩 ② CSS代码压缩③ HTML文件代码压缩④ 文件大小压缩 ⑤ 图片压缩 ⑥ Tree Shaking⑦ 代码分离 ⑧ 内联 chunk

打包报错：asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance.原因：webpack打包提示文件体积过大导致的。解决办法：在vue.config.js增加配置： configureWebpack: config => { // 为生产环境修改配置...