一、使用最新版本 从 Webpack V3，到 V4，再到最新的 V5 版本，虽然构建功能在不断叠加增强，但性能反而不断优化提升，这得益于 Webpack 开发团队始终重视构建性能，在各个大版本之间不厌其烦地重构核心实现...二、缩小资源搜索范围 Webpack 默认提供了一套同时兼容 CMD、AMD、ESM 等模块化方案的资源搜索规则 —— enhanced-resolve，它能将各种模块导入语句准确定位到模块对应的物理资源路径...node_modules 搜索资源，如果找不到则按目录层级尝试逐级向上查找 node_modules 目录，如果依然找不到则最终尝试在全局 node_modules 中搜索。...watchOptions: { ignored: /node_modules/ }, }; 六、跳过 TS 类型检查 JavaScript 本身是一门弱类型语言，这在多人协作项目中经常会引起一些不必要的类型错误...随前端能力与职能范围的不断扩展，前端项目的复杂性与协作难度也在不断上升，TypeScript 所提供的静态类型检查能力也就被越来越多人所采纳。
Angular 模块是带有 @NgModule 装饰器函数的类。 @NgModule 接收一个元数据对象，该对象告诉 Angular 如何编译和运行模块代码。...date-time-picker name="start_time" [(ngModel)]="start_time" ngDefaultControl /> 六、其他问题 1. http请求内容带url时后台解析错误...升级angular-cli版本失败 原因：angular-cli版本升级后，对应webpack版本修改了默认的disableHostCheck属性，导致ng serve --port会出现Invalid...原因：angular-cli内部封装了webpack配置，若手动改动node_modules不方便。...| safeUrl"> 12.迁移一些文件后，启动app失败，出现Cannot read property 'length' of undefined 原因：有些文件里面带有/// ，若路径不对文件找不到则无法启动
node-sass 埋坑记录 背景 原有项目、环境： node：v8.16.2 npm：v6.4.1 node-sass:：v4.8.0 Angular-CLI：v6.x 本机没有安装 Visual Studio...后来，接手的新项目中： Angular-CLI：v8.x 由于升级了 Angular 版本，同样也升级了 Angular-CLI 版本，导致 v8.x 版本的 node 已经无法编译 angular 项目...但 node-sass 新版本安装过程却又报找不到 Python 环境错误，导致 install 失败。...好不容易在本地安装了 Python 环境，又报了个 MSB4132：无法识别工具版本 2.0 的错误。...在网上查了半天，跟着改，却又出现新错误 MSB4019：Microsoft.Cpp.Default.props 找不到的错误。
Webpack模块化 Webpack打包的代码，允许我们使用各种各样的模块化，但是最常用的是CommonJS、ES Module。...是从已转换的代码，映射到原始的源文件; 使浏览器可以重构原始源并在调试器中显示重建的原始源; 更容易定位到源文件错误 如何使用SourceMap 第一步:根据源文件，生成source-map文件，webpack...) 因为在开发中，我们只需要行信息通常就可以定位到错误了 cheap-module-source-map: 会生成source-map，类似于cheap-source-map，但是对源自loader的source-map...bundle.js.map 如果手动添加进来，那么source-map就会生效了 nosources-source-map: 会生成sourcemap，但是生成的sourcemap只有错误信息的提示，不会生成源代码文件...; 点击错误信息也无法查看源码 多个值的组合 事实上，webpack提供给我们的26个值，是可以进行多组合的。
devtool 当 JavaScript 异常抛出时，你常会想知道这个错误发生在哪个文件的哪一行。然而因为 webpack 将文件输出为一个或多个 bundle，所以 追踪这一错误会很不方便。...cheap-module-source-map o - yes original source (lines only) eval-source-map -- + no original source source-map...，而是命名模块。...// devtool: "source-map", // 牺牲了构建速度的 `source-map' 是最详细的 // devtool: "inline-source-map", // 嵌入到源文件中...这种模式在你的 bundle 中注入客户端（用来 live reloading 和展示构建错误）。Inline 模式下，你会在你的 DevTools 控制台中看到构建错误。
经过webpack打包压缩后的代码基本上已经不具备可读性，此时若是代码抛出错误，想要回溯它的调用栈是非常困难的，而有了source map，加上浏览器调试工具（dev tools），要做到这一点就会变得很容易...devtool: 'source-map' } 而对于CSS、SCSS及Less来说，则需要添加额外的source map配置项。...1.3 安全 在1.1中我们抛出一个安全问题，就是在开启source-map的时候任何人都可以通过浏览器的开发者工具devtool来看到工程源码，因此对于安全性来讲是一个极大的隐患。...这样，对于错误来讲，我们仍然可以在console控制台中查看源代码的错误栈，或者console日志的准确行数。对于追溯错误来说基本上够使用。...开发环境中我们关注打包速度，而在生产环境中我们关心的则是线上错误处理、输出资源的体积以及资源渲染等问题，而比较好的利用source-map和资源压缩都可以帮助我们处理处理或优化生产环境中的一些问题，因此比较重要
其实不难发现这么多配置，这些就是source-map和eval、inline、cheap、module 的自由组合。所以我们来拆开看下每项配置。...为了方便演示，我们在代码加一行错误抛出： ? 可以看到错误信息只有行映射，但实际上开发时我们有行映射也基本足够了，所以开发场景下完全可以使用cheap 模式 ，来节省sourceMap的开销 ?...5 module Webpack会利用loader将所有非js模块转化为webpack可处理的js模块，而增加上面的cheap配置后也不会有loader模块之间对应的sourceMap。...什么是模块之间的sourceMap呢？...但我们又需要sourceMap来定位我们的错误信息， 这时我们可以设置hidden-source-map： 一方面webpack会生成sourcemap文件以提供给错误收集工具比如sentry，另一方面又不会为
3、关于sourceMap 回到开始的状态，在我们的开发过程中啊，当我们打包的时候，我们会把几个模块的文件打包为一个main.js输出出去，这个时候，如果某个js文件出了错，那么在浏览器中指出的这个错误位置是跟...main.js相关联的，这对我们找出错误毫无意义。...比如，我们在src/header.js中打印一行错误。...4、使用sourceMap 而sourceMap就是解决这个问题的，当浏览器抛出错误的时候可以帮我们定位到具体的js文件和行列位置。...首先呢，你可以设置这个键值为source-map，这样打包就会生成一个.map的映射文件。
main.js文件内容如下，map文件上面展示过了，就不再展示内容了 1 eval 每个模块用eval()包裹执行。...为了方便演示，我们在代码加一行错误抛出： 可以看到错误信息只有行映射，但实际上开发时我们有行映射也基本足够了，所以开发场景下完全可以使用cheap 模式 ，来节省sourceMap的开销 5 module...Webpack会利用loader将所有非js模块转化为webpack可处理的js模块，而增加上面的cheap配置后也不会有loader模块之间对应的sourceMap。...什么是模块之间的sourceMap呢？...但我们又需要sourceMap来定位我们的错误信息， 这时我们可以设置hidden-source-map： 一方面webpack会生成sourcemap文件以提供给错误收集工具比如sentry，另一方面又不会为
引言 在工作中引入Angular框架将近一年了，在这一年中不断的踩坑和填坑，当然也学习和积累了很多的知识，包括MVVM框架、前后端分离、前端工程化、SPA优化等等。...介绍之前，我假定你了解或者熟悉： NodeJs Npm Git Sass TypeScript angular-cli 环境准备 全局安装NodeJs（>6.9.x），包含npm（>3.x.x） 全局安装...angular-cli npm install -g @angular/cli IDE推荐使用WebStorm 框架搭建 angular-start是我在GitHub上维护的一个起步项目，你可以直接下载作为基础开发框架来使用...package.json的scripts配置了"start": "ng serve --hmr -o --proxy-config proxy.config.json"，可以看到这条命令分别配置了--hmr（启动模块热更新
我们如何将报错信息(bundle错误的语句及其所在行列)映射到源码上？为了解决这个问题，google 提出了sourcemap 的想法，并在chorme上最先支持sourcemap的使用。...)) 这么多种配置项其实只是五个关键字 eval、source-map、cheap、module 和inline的组合罢了，下面列出它们的意义： 「关键字」 「含义」 特点 source-map 产生....基于它，我们将bundle文件的错误信息映射到源码文件上。...cheap-module-source-map Webpack会利用loader将所有非js模块转化为webpack可处理的js模块，而增加上面的cheap配置后也不会有loader模块之间对应的sourceMap...什么是模块之间的sourceMap呢？
image.png 总结：与 source-map 相同，但不会为 bundle 添加引用注释。...如果你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息，但不想为浏览器开发工具暴露你的 source map，这个选项会很有用。可用于开发环境和生产环境。...而是只将其用于错误报告工具。 ps:inline可以和大多数关键字配合使用，作用是将source map进行内联。 3.3 eval 关键字 直接将每个模块使用 eval 执行。...但不管搭配什么，它的作用都是，将每个模块都使用 eval() 执行。 4. source map详细程度 目前为止，我们都是拿到了所有模块的完整映射信息。...source-map 生成映射信息文件 inline 将映射信息内联 eval 将模块用eval包裹执行。含有这个关键字就不能用于生产环境。
什么是angular-cli 简言之：就是NG团队自行维护的一个项目脚手架[内置单元测试及webpack打包工具等]，这货前身是ember-cli； 官网 / Github 吐槽 我最早是从Angular...cli beta18开始用的，截止beta28.3,这个分支已经废弃，已经迁移,之前npm install angular-cli不推荐； 目前最新的是v1.0.0正式版【2017-3-24】，从旧版本到...正式版的配置稍微有些改动，我比较了下基本不大，放心使用 系统环境配置 window 安装lts版本的nodejs v6.10.0 ， Angular-cli中的node-sass不支持7.x，装不上的...interface my-new-interface 新建一个接口 Enum ng g enum my-new-enum 新建一个枚举 Module ng g module my-module 新建一个模块...范围 命令 作用 e2e ng e2e 跑自动化测试-自己写测试测试用例 test ng test 跑单元测试 -- 自己写 lint ng lint 调用tslint跑整个项目，可以收获一堆警告和错误
---- 什么是Angular-cli 简言之：就是NG团队自行维护的一个｀脚手架｀[内置单元测试及webpack2打包工具等] －－ 这货前身是ember-cli； 官网：cli.angular.io...正式版的配置稍微有些改动，我比较了下基本不大，放心使用 ---- 安装之前 window下： 安装lts版本的nodejs[6.10.0] ， Angular-cli中的node-sass不支持7.x，...装不上的 装了visual studio 2015+及python2+ [node-sass及部分模块需要调用这两个依赖进行编译] 或者采用国内的cnpm安装,记得带版本号，有时候不带版本会安装0.0.1...interface my-new-interface 新建一个接口 Enum ng g enum my-new-enum 新建一个枚举 Module ng g module my-module 新建一个模块...范围 命令 作用 e2e ng e2e 跑自动化测试-自己写测试测试用例 test ng test 跑单元测试 -- 自己写 lint ng lint 调用tslint跑整个项目，可以收获一堆警告和错误
'none' : 'source-map' } 同理，在项目的 js 内也可以使用该变量。 设置 source-map 该选项能设置不同类型的 source-map 。...代码经过压缩后，一旦报错不能准确定位到具体位置，而 source-map 就像一个地图， 能够对应源代码的位置。这个选项能够帮助开发者增强调试过程，准确定位错误。...为了体验它的作用，我在源代码中故意输出一个不存在的变量，模拟线上错误： ? 在预览时，触发错误： ?...很明显错误的行数是不对应的，下面设置 devtool 让 webpack 在打包后输出 source-map 文件，用于定位错误。...module.exports = { devtool: 'source-map' } 再次触发错误，source-map 文件起作用准确定位到代码错误的行数。 ?
我们知道 Webpack 通过模块之间的引用关系，构建一个依赖树，并生成相应的结果文件。...上面提到的，我们找不到报错的文件的相关信息，那有没有一个拥有源文件与打包后文件的映射关系的文件，让它来告诉我们呢？...一个特殊的场景，你需要在生产环境使用到 source map —— 监控系统分析具体错误信息，这个时候一般选择 source-map—— 整个 source map 作为一个单独的文件生成（当然如果你不需要获取列信息...而是只将其用于错误报告工具。...来捕获 js 报错，然后上报到服务器，以用来收集用户使用时候发生的 bug 解析 JS 错误，映射源文件堆栈 通过 sourcemap 查找原始报错信息，可以使用 source-map[5] 监控平台展示
浮动指针错误 浮点运算失败时引发。 GeneratorExit 调用生成器的 close()方法时引发。 导入错误 找不到导入的模块时引发。 索引错误 当序列的索引超出范围时引发。...值错误 当函数获得类型正确但值不正确的参数时引发。 零分割错误 当除法或模块运算的第二个操作数为零时引发。 索引错误 试图访问无效索引处的项目时会抛出IndexError。...", line 1, in L1[3]IndexError: list index out of range Copy ModuleNotFoundError 找不到模块时抛出...找不到钥匙时抛出KeyError。...找不到对象时抛出NameError。
许多宿主环境额外增加了 filename 和 stack 等属性 错误只有被 throw，才会产生异常，不被抛出的错误不会产生异常。...异常会不断传播直到遇到第一个 catch。...可以使用stacktracey和source-map实现根据错误堆栈还原到实际发生错误的代码 线上代码经过压缩后一般只有 1 行，对于定位原始错误是很困难的。...并且默认的e.stack属性是个字符串，可以借助stacktracey进行解析并结合source-map进行反解 const sourceMap = require('source-map'); const...这种由于逻辑缺失容错造成的自动抛出错误应该是要尽最大程度杜绝并防范的 const a = {} a.b.c = 1 手动抛出：直接调用throw 那什么时候应该手动抛出异常呢？
mvvm入口函数，整合以上三者 http常见状态码 1** 信息，服务器收到请求，需要请求者继续执行操作 2** 成功，操作被成功接收并处理 3** 重定向，需要进一步的操作以完成请求 4** 客户端错误...，请求包含语法错误或无法完成请求 5** 服务器错误，服务器在处理请求的过程中发生了错误 vue路由机制 不会把你相关的会的说出来就好了，怎么配的路由等 主要是和<router-view...39.105.136.190:3000', secure: false, changeOrigin: true } } } 资源地图：devtool: 'source-map...xxx 该种方式一个文件内只能使用一次 方式2 导入: import {XXX} from "xxx" import {XXX as YYY} from "xxx" //将模块...组件 服务 管道 什么是依赖注入 如何使用路由 参数快照 参数订阅 响应式编程 angular中的模板式表单和响应式表单 如何做表单验证 angular-cli的使用方式 如何创建组件 创建服务 创建类
在排查线上问题时可以将source map 上传到错误监控系统里面，以此来排查一些错误问题。...1. source map 关键字 1. eval：使⽤eval包裹模块代码； 2. source map：产⽣.map⽂件； 3.cheap：不包含列信息； 4. inline：将.map作为DataURI...path.join(__dirname, 'dist'), filename: '[name].js' }, mode: 'development', // 配置source-map...类型 devtool: 'source-map' };
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM
