开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在使用ng build时，为什么在chrome中没有出现webpack://

在使用ng build时，为什么在chrome中没有出现webpack://？

webpack:// 是webpack打包工具生成的一个特殊协议，用于在浏览器中调试和查看源代码。当使用ng build命令构建Angular项目时，默认情况下是不会生成webpack:// 协议的。

在Angular项目中，使用ng build命令会将项目源代码编译成静态文件，并生成一个名为dist的目录，其中包含了构建后的文件。这些文件可以通过服务器进行访问，但不会直接在浏览器中显示webpack:// 协议。

如果你希望在chrome中看到webpack:// 协议，可以尝试以下方法：

使用ng build --source-map命令构建项目，该命令会生成源映射文件（source map）。源映射文件是一种将编译后的代码映射回原始源代码的文件，可以在浏览器中进行调试。在生成的dist目录中，你可以找到一个名为main.js.map的文件，该文件包含了源映射信息。将该文件与编译后的代码一起部署到服务器上，并在浏览器中打开开发者工具，你将能够看到webpack:// 协议。
使用ng serve命令启动开发服务器，该命令会在本地启动一个开发服务器，并将项目源代码编译成临时文件。在浏览器中打开开发者工具，你将能够看到webpack:// 协议。

需要注意的是，以上方法只适用于开发环境，生产环境下的构建结果不会包含webpack:// 协议。

腾讯云相关产品和产品介绍链接地址：

腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
腾讯云物联网（IoT）：https://cloud.tencent.com/product/iot
腾讯云移动开发（Mobile）：https://cloud.tencent.com/product/mobile

相关搜索:Angular -在Jenkins中运行"npm run ng build“时找不到sh: ng:命令 angular http请求在使用ng build --prod构建时从不返回数据 Ng build:在docker中构建时出现优化错误 “环境”为什么没有被设置在“Webpack”中？为什么chrome在使用列时没有使用所有的宽度？为什么Firestore数据检索在ng-serve版本中有效，但在ng-build版本中失败为什么在创建文件的备份tar时出现"Build step 'Execute shell‘marked build as failure“错误为什么我的Sass在使用Gulp时没有出现？使用javascript在Chrome build by chart jS中打印图表在angular 6及以上版本中使用webpack好吗?还是由ng-build prod处理？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

【DB笔试面试565】在Oracle中，为什么索引没有被使用?

♣ 题目部分在Oracle中，为什么索引没有被使用? ♣ 答案部分 “为什么索引没有被使用”是一个涉及面较广的问题。有多种原因会导致索引不能被使用。...还有一个比较常见的原因，就是对索引列进行了函数、算术运算或其他表达式等操作，或出现隐式类型转换，导致无法使用索引。...n 索引是否应该被使用？二、索引本身的问题 n 索引的索引列是否在WHERE条件中（Predicate List）？ n 索引列是否用在连接谓词中（Join Predicates）？...n 索引列是否出现了隐式类型转换（Implicit Type Conversion）？ n 是否在语义（Semantically）上无法使用索引？ n 错误类型的索引扫描？ n 索引列是否可以为空？...n 在总体成本中，表扫描的成本是否占大部分？ n 访问空索引并不意味着比访问有值的索引高效？ n 参数设置是否正确？四、其它问题 n 是否存在远程表（Remote Table)？

1.2K2 0

使用Angular CLI进行Build (构建) 和 Serve

是angular和第三方库可以使用source-map-explorer来分析依赖, 并且查看哪些模块和类在bundle里面....下面运行程序: ng serve -o: ? 可以看到在ng serve的时候, 加载了上述的文件. 因为ng build是开发时的build, 所以没有做任何优化, 文件挺大的....这时看一下文件目录, 并没有dist目录: ? 那么这些文件是怎么被serve的呢? 这是因为, 这时候webpack是在内存中进行的serve....可以看到所有的文件都非常小了, 并且没有vendor了(因为prod下--build-optimizer起作用所以vendor没有了, 但可以使用--vendor-chunk true给弄出来)....还多出来一个webpack.config.js文件: ? 为什么要这么做呢? 可以对项目更深入的配置.... 这时运行程序就是 npm start了.

2.3K7 0

服务器使用宝塔面板出现“您的请求在web服务器中没有找到对应的站点!”的解决办法

服务器使用宝塔面板出现“您的请求在web服务器中没有找到对应的站点!”的解决办法服务器使用宝塔面板出现“您的请求在web服务器中没有找到对应的站点!”...的解决办法近期经常看到有站长朋友反应服务器出现以下报错： QQ图片20180720152852.png 这个提示是说您访问的域名，在这台服务器上没有找到对应的站点，其实就是配置文件没有正确读取才出现的...采用第二条方式 2.连接进入linux服务器SSH终端，输入以下命令： /etc/init.d/httpd stop pkill -9 httpd /etc/init.d/httpd start 这三条命令在SSH...中逐个输入，每输入一条就回车执行一次。

8.2K5 0

Angular10配置webpack打包「详细教程」

当工作空间文件结构到位时，可以在命令行中使用 ng generate 命令往该应用中添加功能和数据。这个初始的根应用是 CLI 命令的默认应用（除非你在创建其它应用之后更改了默认值）。...当你向应用中添加更多组件时，它们也必须在这里声明。 app/package.json 此文件只会出现在使用 --strict 模式创建的应用中。此文件不是供包管理器使用的。...添加ngx-build-plus： ng add ngx-build-plus 注意：如果要将其添加到projects文件夹中的特定子项目，请使用--project开关指向它：ng add ngx-build-plus...但是6版本中可能会出现安装不成功，这时候请直接yarn add ngx-build-plus --dev，然后angular.json文件中更改以下两处地方: "build": { - "builder...三、使用webpack把第三方库模块分离 - optimization + splitChunks 在 webpack4.x 中，我们使用 optimization.splitChunks 来分离公用的代码块

4.9K2 0

Angular CLI 升级 6.0 之后遇到的问题

Angular CLI 1.7.4 在使用 ng build --prod 会构建失败，而 ng build 是正常的。...比较好的解决办法是使用 ng build --prod --extract-license=false 或者 ng build --prod --no-extract-license。...最近将 Angular CLI 升级到 6.X 之后，直接 ng build 会报以下错误，ng serve 也是如此。...但是使用 ng build --prod 是正常的。同样地，使用 ng build --extract-license=false 也可以解决问题。...简单看一下，问题是由 license-webpack-plugin 插件引起的。这款插件用于输出第三方插件的许可协议。老外比较重视版权吧。但是不知道为什么总是在这个地方出问题。

1.4K2 0

angular入门教程_初学者织围巾简单教程慢动作

而这一切在 NodeJS 出现之后都得到了很好的解决：对 JS 代码的预处理经历了 Grunt、Gulp 的短暂辉煌之后，终于在 webpack 这里形成了事实标准的局面。...所以，在正常的开发过程里面请不要加 –prod 参数。 ng serve 是在内存里面生成项目，如果你想看到项目编译之后的产物，请运行 ng build。...构建最终产品版本可以加参数，ng build –prod。...构建项目：ng build，如果你想构建最终的产品版本，可以用 ng build –prod 更多的命令和参数请在终端里面敲 ng 仔细查看，尽快熟悉这些工具可以非常显著地提升你的编码效率。...如果真的出现了重名，Angular 会按照以下优先级来进行处理：模板局部变量 > 指令中的同名变量 > 组件中的同名属性。

3.3K2 0

Angular CLI 简介

因为ng build是开发时的build, 所以没有做任何优化, 文件挺大的. 这时看一下文件目录, 并没有dist目录: 那么这些文件是怎么被serve的呢?...试试生产环境: ng build --prod 可以看到所有的文件都非常小了, 并且没有vendor了(因为prod下--build-optimizer起作用所以vendor没有了, 但可以使用--vendor-chunk...执行该命令试试: 看看有哪些变化: .angular-cli.json: package.json: 命令脚本都变了还多出来一个webpack.config.js文件: 为什么要这么做呢?...user ng g c admin/email 然后配置一下路由, 最重要得到这个效果: 这时我重新执行一下ng test: 尽管程序运行没有问题, 但是测试还是出现了问题: router-outlet...如果我想debug e2e, 那么执行这个命令: ng e2e -ee 由于我使用的是mac, 当前这个命令在mac上貌似确实有一个bug: 如果可以正常运行这个命令的话, 终端窗口会出现“Debugger

6K11 0

Angular 工具篇之分析包的大小

： $ npm i webpack-bundle-analyzer --save-dev 接下来我们使用 Angular CLI 来构建项目，在构建的时候，需要添加相关参数，具体如下： $ ng build...在 angular6-example-app 项目中，也为我们提供了相应的 npm script，具体如下： "bundle-report": "ng build --prod --stats-json...首先我们先来在当前项目中安装 source-map-explorer： $ npm i source-map-explorer --save-dev 然后在重新进行项目构建： $ ng build --.../source-map-explorer dist/main.d72e9d91fd17f9fe7b8c.js 成功执行上述命令后，在浏览器中你将会看到以下内容： ?...为了方便操作，我们也可以定义一个 npm script 任务来处理上述的工作： "map-explorer": "ng build --prod --source-map && source-map-explorer

2.3K4 0

angular-cli.json配置参数解释，以及依稀常用命令的通用关键参数解释

`ng generate`命令时，自动为selector元数据的值添加的前缀名 "deployUrl": "//cdn.com.cn", // 指定站点的部署地址，该值最终会赋给webpack...常用命令的通用关键参数解释 1.ng serve --host (self) 指定本地Server绑定的域名，默认值：localhost.如果希望使用self来访问你的站点，须加入以上参数 2.ng serve...--hmr 注意开启之后，只是在angular-cli里的webpack添加必要的扩展，等价于webpack-dev-server --hot，还需要在应用代码里处理hmr逻辑，如可在main.ts里添加...下面两条等价： ng build --target=production ng build --prod 7.--environment 指定应用执行环境。...下面两句等价： ng build --environment=prod ng build --env=prod 构建时会加载angular-cli.json指定的环境配置文件： "environments

1.6K3 0

VUE调试工具

接着我在D盘新建了vue-devtools文件夹，在该文件夹中打开了 git命令行程序，即 Git Bash Here。...因为在我们克隆完vue-devtools安装包后，D:\vue-devtools\vue-devtools 目录下默认进入的是dev环境，（这个我在 git命令行程序中核实过了，但是当时没有截图，sorry...上述操作完成后，接下来在vue-devtools目录下安装依赖包，在power shell 中输入 npm install 命令。...依赖包下载完后执行 npm run build，编译打包成功后会在shells下生成chrome文件夹。（终于没有报错了）此文件夹就是用来放入chrome的扩展程序。.../background.js"], "persistent": true }, 我心存侥幸的按了F12键看看有没有出现VUE，然而并没有出现VUE。

1.6K4 0

Angular开发实践（六）：服务端渲染

它可以生成这些页面，并在浏览器请求时直接用它们给出响应。它也可以把页面预先生成为 HTML 文件，然后把它们作为静态文件供服务端使用。...以便它们在客户端应用启动时可以被找到并移除。...在 package.json 的 scripts 区配置 build 和 serve 有关的命令： { "scripts": { "ng": "ng", "start...run build:prerender && npm run serve:prerender", "build": "ng build", "build:client-and-server-bundles...": "ng build --prod && ng build --prod --app 1 --output-hashing=false", "build:prerender": "npm

4.7K10 0

记录工作中遇到的各种问题（Bug，总结，记录）

中，某些情况下，页面滚动到底部（有滚动条），点击select，input, textarea等相关项时，会自动滚动到页面顶部在chrome60中还是正常的，一升级就出现问题了目前还不知道为何，可能是...Chrome新版本的插件列表中默认没有Shockwave Flash，某些Flash播放器会失效（如果播放前查询插件是否存在）在比较旧的浏览器中是可以正常播放Flash视频的，有直接就能播放的，也有提示选择打开...但在新版Chrome中（如62），连提示都没有了，需要手动在设置中添加Flash支持的网站例外才能播放看了所用的Flash播放器（CuPlayer），播放前是先检测插件是否存在的，这造成了在新版Chrome...暂时的解决办法是，稍微修改一下播放器的源码，在特定的时候传个参数，就不检测Flash是否存在了，直接使用即可，就可以让Chrome出现打开Flash的提示允许一次之后，当前域名端口的一条记录就会被添加到例外中...在React中使用第三方插件（比如jQuery）来更新DOM树结构时，会出现类似这种错误。

17.9K1 2

如何使用prerender-spa-plugin插件对页面进行预渲染

目标希望能够通过预渲染，让页面在初次访问没有执行JavaScript时，就能够携带足够的信息，即将JavaScript渲染的内容提前渲染到HTML中。发布期望不做过多的修改。...安装完成后，我们就可以在webpack的配置文件中增加对应的配置了。...如果大家使用的也是vue-cli，那么我们需要增加的配置是在vue.config.js中，如果是直接修改webpack的配置，那么方法也是类似。...这个配置在talos中是需要指定的，talos中的chrome地址默认是/usr/bin/google-chrome。 ...如果想要了解为什么是这两个钩子节点，那么你可以阅读下webpack插件的开发章节。

2K3 0

Vue.js系列之入门手册整理

webpack.base.conf.js webpack.dev.conf.js webpack.prod.conf.js build.js 打包构建使用，不能随意修改 check-version.js...没有实际意义，但是为了支撑整个vuejs框架，存在很必要。...报错编译devtools工程出现报错：...vue-devtools@5.0.0-beta.4 build: `cd shells/chrome && cross-env NODE_EN V=production webpack --progress...里可以看到修改：vue-devtools\shells\chrome\manifest.json 如果devtools插件还是不起效，可以在vue-devtools\shells\chrome\webpack.config.js

1.4K2 0

Vue.js入门手册整理

webpack.base.conf.js webpack.dev.conf.js webpack.prod.conf.js build.js 打包构建使用，不能随意修改 check-version.js...没有实际意义，但是为了支撑整个vuejs框架，存在很必要。...报错编译devtools工程出现报错：...vue-devtools@5.0.0-beta.4 build: `cd shells/chrome && cross-env NODE_EN V=production webpack --progress...如果devtools插件还是不起效，可以在vue-devtools\shells\chrome\webpack.config.js加上 if (process.env.NODE_ENV ==‘production

2.2K5 0

从零学脚手架(四)---babel

ES6的枷锁细心的朋友可以知道，在之前打包编译测试都是使用简单的ES5特性，并没有使用过ES6（ES2015+）特性（import除外）这是因为webpack本身不会处理代码中的ES6（ES2015...先来做一个测试在 /src/index.js 文件使用部分ES6（ES2015+），查看打包编译代码会发现webpack并没有处理ES6（ES2015+）特性。...还有部分ES6特性并没有被转换（promise、includes、filter），并且代码被一个箭头函数包裹着。代码被箭头函数包裹这个问题稍后在解决。先来了解下为什么有的ES6特性没有被转换。...因为浏览器设置的为 Chrome > 75 ，几乎支持全部新特性 image.png 可以看到打包生成代码中没有提供filter垫片，并且 await 语法都没有转换。...在日常开发中都应该遵守的一个原则：避免全局污染。全局污染是一件极为可怕的问题。在协同、代码运行时会出现不可预知的问题。

1.2K3 0

全网最优雅的 React 源码调试方式

找到 rollup 的配置，添加一行 sourcemap: true，这个很容易理解，就是让 rollup 在构建时产生 sourcemap：再跑 npm run build，会报这样的错误：某个转换的插件没有生成...为什么呢？...不经过 webpack 打包，那就没有 webpack 产生的 sourcemap，不就一次就映射到 React 最初的源码了么。那怎么不打包这俩模块呢？...webpack 支持 externals 来配置一些模块使用全局变量而不进行打包，这样我们就可以单独加载 react、react-dom，然后把他们导出的全局变量配置到 externals 就行了。...现在 sourcemap 已经生效了，只不过 react 项目没有在 workspace 下。

1.5K2 0

玩转 Angular 环境变量

对于 “程序猿” 来说，在日常开发过程中，我们经常要与不同的开发环境打交道。在实际的项目的开发过程中，一般至少会有两个环境：开发环境和线上环境，这是很简单的情形。...environment.ts 和 environment.prod.ts 在 Angular CLI 发布后，越来越多的开发者都是使用 Angular CLI 来创建新的项目： $ ng new PROJECT-NAME...通过上面的注释，我们知道在执行 ng build ---prod 命令，进行项目构建的时候，会执行文件替换操作。...，我们通过以下命令进行项目构建： $ ng build --prod 那么有的同学，可能想到对于构建测试环境的包，是不是只要运行： $ ng build --test 想象中很完美，但实际上并不是这样，...可能有的同学已经注意到了 --configuration 这个参数，通常参数说明，我们知道这个参数用于指定构建时所使用的配置文件。没错，要达到我们预期的结果，就要利用该参数。

3.2K2 0

最全Vue开发环境搭建

vue的安装 1.vue的安装依赖npm 从node.js官网下载并安装node，为什么要安装node，因为node中自带npm；有空还可以学一下node.js,毕竟node.js也可以开发后端。...2.安装cnpm 在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 建议都用-g。...如果使用淘宝镜像安装就输入命令行 cnpm install -g vue-cli进行安装，如果没有安装淘宝镜像依旧用 npm install -g vue-cli安装无非慢点而已。...提一下，vue-cli 的 webpack 模板已经预先配置好（在安装vue-cli时,已经自带安装webpack） 3.以上搭建完成后我们就可以构建并运行一个简单的项目啦 image.png ?...对于直接script引用,没有用构建工具的项目，直接选中html页面右键chrome浏览就可以了,或者搭建一个httpserver用谷歌浏览器浏览就行了 vue-cli构建的vue项目，如何调试，肯定是

2.3K2 0

前端的世界里没有“容易”二字

2019年对于大前端技术领域而言变化不算太大，目前三大技术框架日趋成熟，短期内不大可能出现颠覆性的前端框架。我将在这篇文章中，带大家盘点一下：2019高级前端必备的 TOP 级知识点。...---- 1 框架层的更新 React，Vue，Angular依旧保持了前三，今年React发布了16.9,Vue3也即将发版，但是总体情况来看Angular在国内的开发者占有率还是偏低，这个跟当初NG1...2 状态管理随着前端框架的流行，组件化开发成为主流，然而随着页面复杂度越来越高，在一个组件文件中，要做UI渲染、事件处理、状态管理等等事情，于是一个文件变的越来越复杂。...翘首企盼的Webpack5、一个前端在前端工程化中的具体实践中，要做的工作越来越多。 ?...0到1带你手写简版的Webpack 6.Webpack5新特性尝鲜与微前端学习Webpack5最新特性和进展学习Webpack在微前端具体实现细节

7792 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭