兮动人

文章目录1. 生产环境遇到的问题2. 什么是 Source Map3. webpack 开发环境下的 Source Map3.1 默认 Source Map 的问题3.2 解决默认 Source Map 的问题4. webpack 生产环境下的 Source Map4.1 只定位行数不暴露源码4.2 定位行数且暴露源码5. Source Map 的最佳实践1. 生产环境遇到的问题前端项目在投入生产环境之前，都需要对 JavaScript 源代码进行压缩混淆，从而减小文件的体积，提高文件的加载效率。此时

文章目录1. webpack 插件的作用2. webpack-dev-server2.1 安装 webpack-dev-server2.2 配置 webpack-dev-server2.3 打包生成的文件哪儿去了？1. webpack 插件的作用通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便。最常用的webpack 插件有如下两个：① webpack-dev-server类似于 node.js 阶段用到的 nodemon 工具每当修改了源代码

小图片（logo）建议转成 bese64 格式，因为转为 base64 ，浏览器访问base64字符串就不需要再次发送请求给服务器，可以直接拿到图片的数据，防止发起不必要的网络请求大图片建议还是采用 <img> 标签的形式获取图片，标签的形式获取图片时，浏览器通过请求服务器来获取图片的数据。而base64则不需要再次请求，直接访问到图片的数据了可以通过控制图片的大小来定义是否是大图片或小图片，如：超过 10MB 为大图片，没超过则为小图片，这个时候可以通过 limit 来控制了.

文章目录1. loader 概述2. loader 的调用过程3. 打包处理 css 文件4. loader 调用过程图解5. 打包处理 less 文件6. 打包处理样式表中与 url 路径相关的文件7. 打包处理 js 文件中的高级语法7.1 安装 babel-loader 相关的包7.2 配置 babel-loader8. 完整实例代码1. loader 概述在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块，webpack 默认处理不

文章目录1. webpack 插件的作用2. webpack-dev-server2.1 安装 webpack-dev-server2.2 配置 webpack-dev-server2.3 打包生成的文件哪儿去了？2.4 生成到内存中的文件该如何访问？3. html-webpack-plugin3.1 安装 html-webpack-plugin3.2 配置 html-webpack-plugin3.3 解惑 html-webpack-plugin4. devServer 节点5. 完整的实例代码如下1.

文章目录1. 什么是 webpack2. 创建列表隔行变色项目3. 在项目中安装 webpack4. 在项目中配置 webpack5. 执行命令解析：1. 什么是 webpack概念：webpack 是前端项目工程化的具体解决方案。主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。注意：目前 Vue，React 等前端项目，基本上都是