李公子的博客

生产环境遇到的问题前端项目在投入生产环境之前，都需要对 JavaScript 源代码进行压缩混淆，从而减小文件的体积，提高文件的 加载效率。此时就不可避免的产生了另一个问题：对压缩混淆之后的代码除错（debug）是一件极其困难的事情变量被替换成没有任何语义的名称 空行和注释被剔除什么是 Source MapSource Map 就是一个信息文件，里面储存着位置信息。也就是说，Source Map 文件中存储着压缩混淆后的 代码，所对应的转换前的位置。有了它，出错的时候，除错.

为什么要打包发布项目开发完成之后，需要使用 webpack 对项目进行打包发布，主要原因有以下两点：① 开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件② 开发环境下，打包生成的文件不会进行代码压缩和性能优化为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布。配置 webpack 的打包发布在 package.json 文件的 scripts 节点下，新增 build 命令如下： "scripts": {...

loader 概述在实际开发过程中，webpack 默认只能打包处理以 .js 后缀名结尾的模块。其他非 .js 后缀名结尾的模块， webpack 默认处理不了，需要调用 loader 加载器才可以正常打包，否则会报错！loader 加载器的作用：协助 webpack 打包处理特定的文件模块。比如：⚫ css-loader 可以打包处理 .css 相关的文件⚫ less-loader 可以打包处理 .less 相关的文件⚫ babel-loader 可以打包处理 webpack 无

webpack 插件的作用通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便。最常用的 webpack 插件有如下两个：① webpack-dev-server⚫ 类似于 node.js 阶段用到的 nodemon 工具⚫ 每当修改了源代码，webpack 会自动进行项目的打包和构建② html-webpack-plugin...

什么是webpack？概念： webpack是前端工程化的具体解决方案 。主要功能：它提供了有好的前端模块化开发支持，以及代码压缩混淆，处理浏览器中JavaScript的兼容性，性能优化等强大的功能。好处：让程序员把工作重心放到具体功能的实现上，提高了前端的开发效率和项目的可维护性。注意：目前Vue，react等前端项目，基本都是基于webpack进行工程化开发的。webpack 示例我们通过一个demo来演示webpack的使用过程我么先创建一个文件夹，初始化项目文件新