网站建设里程碑,网络整合营销的目的是什么,保定市做网站的电话,电器工程东莞网站建设一、配置文件webpack 提供的 cli 支持很多的参数#xff0c;例如 --mode 。在我们平时的开发过程中#xff0c;我们要学习很多的功能#xff0c;这些很多都是可以用参数来完成的。那么后边就会导致参数越来越多#xff0c;我们使用命令特别的不方便#xff0c;所以我们会使…一、配置文件webpack 提供的 cli 支持很多的参数例如 --mode 。在我们平时的开发过程中我们要学习很多的功能这些很多都是可以用参数来完成的。那么后边就会导致参数越来越多我们使用命令特别的不方便所以我们会使用一种更加灵活的方式---配置文件。1. webpack 配置文件1) 配置文件的基本使用默认情况下webpack 会读取 webpack.config.js 文件作为配置文件但也可以通过 cli 参数 --config 来指定某个配置文件例如 npx wenpack --config abc.js。2配置文件的编写规范导出方式必须使用 CommonJS 模块规范导出配置对象即 module.exports {...} 。不能使用 ES6 的 export default 语法会导致 webpack 无法识别配置。配置优先级当命令行参数与配置文件冲突时命令行参数优先级更高3常见配置属性学习 webpack 简单的来说就是学习配置文件有哪些东西可以配置。有了配置文件就可以在配置文件配置属性而不需要再在命令行配置了。mode编译模式字符串取值为 development 或 production 指定编译结果代码运行的环境会影响 webpack 对编译结果代码格式的处理entry入口文件配置字符串指定打包的起点output出口配置对象指定打包结果的文件名和路径指定编译结果文件4配置文件注意事项配置文件中的代码必须是有效的 Node.js 代码而且自定义配置文件路径必须正确否则会报 MODULE_NOT_FOUND 错误。webpack 支持多模块化为什么配置文件里边只能用 commonjs 导出而不能用 ES6 呢webpack 支持多模块化指的是它在构建依赖关系的时候无论用 commonjs 还是 es6 它都能识别到。为什么在配置文件里边识别不了是因为 webpack 在打包过程中或说是在编译过程中它是在 node 环境在这个编译的过程它要读取配置文件的内容而 nodejs 原生支持 CommonJS。5配置文件与源代码的关系打包结果独立性dist 目录产物完全独立不依赖原始配置文件可脱离项目目录单独运行打包结果。关键区别配置文件参与打包过程执行决定打包行为源代码仅提供内容素材不影响打包过程本身2. 配置文件的基本配置1mode配置方式可通过CLI参数--mode或配置文件设置推荐使用配置文件优先级规则当命令行参数与配置文件冲突时以命令行参数为准可选值development开发环境代码不压缩production生产环境代码会进行优化压缩实践技巧可在package.json中配置不同脚本如dev: webpack和build: webpack --modeproduction2entry默认值./src/index.js修改方式在配置文件中通过entry属性指定路径规则需使用相对路径从配置文件所在目录开始计算注意事项修改入口文件后需确保文件存在否则会报错Cant resolve ./src成功打包后生成对应的输出文件3output默认输出./dist/main.js配置结构output是一个对象包含多个配置属性常用属性filename指定输出文件名保留机制修改输出文件名后旧文件不会被自动删除3. 配置文件的总结a. 1配置文件的运行环境参与打包过程配置文件在打包过程中会参与运行其导出的结果将影响整个打包流程。Node环境要求由于运行环境是Node环境因此配置文件中参与打包过程运行的代码必须是Node代码。b. 2源代码处理机制源代码读取方式webpack通过入口文件读取源代码但仅分析代码内容而不执行。模块化兼容性源代码中可以使用任意模块化规范如CommonJS/ES Module等因为webpack只进行依赖分析。c. 3打包过程与运行时的区别错误发生时机打包阶段不会执行源代码因此语法错误不会导致打包失败如a.abc()调用null值运行阶段打包后的代码在浏览器/Node环境执行时才会暴露运行时错误配置文件特殊性与源代码不同配置文件中的代码会在打包时立即执行因此必须保证语法正确。二、devtool配置1. source map源码地图前端开发中源代码经过合并、压缩、转换后运行导致报错时难以定位原始代码位置。source map仅解决调试问题与webpack无关是独立技术。其核心功能是将转换后代码映射回源代码不影响实际运行结果。source map 无兼容性问题因为调试仅面向开发者使用现代浏览器普通用户不会触发调试功能。1浏览器处理source map的原理文件结构转换后代码如bundle.js末尾包含注释//# sourceMappingURLbundle.map指定映射文件映射文件记录原始代码内容及与转换代码的精确对应关系工作流程浏览器请求并执行转换后代码发现source map注释后自动请求映射文件报错时通过映射关系显示原始代码错误位置技术本质映射文件是独立配置文件不参与代码执行仅提供调试时的代码映射服务。2使用source map的最佳实践开发环境必要性必须启用提供完整调试支持优势快速定位合并/压缩后的代码错误源头生产环境风险1显著增加网络传输量映射文件体积较大风险2暴露原始代码可通过工具从映射文件还原源码特殊需求若需调试生产环境问题应对映射文件进行特殊处理如限制访问、混淆等核心原则source map是纯调试工具不应影响生产环境性能和安全性2. 构建示例1开发环境调试开发环境配置新建webpack.config.js文件设置mode: development默认使用eval方式运行代码浏览器会通过注释识别源码位置错误信息会显示在原始文件位置而非打包后文件eval模式特点代码通过eval()执行末尾添加//# sourceURL注释浏览器调试时会根据注释将代码归类到虚拟文件结构中对实际运行无影响仅用于调试目的开发环境默认使用此方式调试体验错误信息直接定位到源文件位置浏览器显示webpack://虚拟目录结构可查看原始代码而非转换后的代码2生产环境问题生产环境配置设置mode: production默认使用none模式不生成source map错误信息直接显示在打包后的代码中调试困难错误信息指向压缩后的代码行无法直接关联到原始源文件难以定位和修复问题devtool关键配置none不生成source map生产环境默认eval使用eval执行开发环境默认source-map生成独立source map文件eval-source-map最佳开发环境品质cheap-module-eval-source-map平衡速度与准确性配置建议开发环境使用eval-source-map或cheap-module-eval-source-map生产环境使用source-map并确保服务器安全配置避免同时使用devtool选项和SourceMapDevToolPlugin插件3.devtool配置1). eval-source-map执行方式: 每个模块使用eval()执行source map转换为DataUrl后添加到eval()中构建特点:初始化source map时比较慢重新构建时速度较快会生成实际文件映射精度:行数能够正确映射到原始代码生成开发环境最佳品质的source map推荐场景: 开发环境首选配置cheap-eval-source-map特点:类似eval-source-map但只映射行数不生成列映射(column mapping)忽略loader的source map仅显示转译后的代码缺点:错误定位不够精确同一行长代码中无法准确定位错误位置2). 开发环境eval-source-map优势:准确对应源代码能定位行和列的错误文件体积适中source-map单独文件:生成独立.map文件构建速度较慢通过//# sourceMappingURL注释引用调试时可查看完整源代码和生成代码的对应关系3). 开发环境和生产环境生产环境默认建议:不使用source map是最佳选择必须使用时的方案:配置服务器禁止普通用户访问.map文件仅开发者通过特殊方式获取source map避免网络传输开销和代码暴露风险4). 生产环境hidden-source-map特点:生成source map但不添加引用注释对用户隐藏但文件实际存在需要特殊工具才能读取适用场景:生产环境调试需求需要保护源代码不被轻易获取通过专业工具进行错误分析
