论webpack --profile 在开发中重要

最新推荐文章于 2022-09-23 01:49:30 发布
最新推荐文章于 2022-09-23 01:49:30 发布
阅读量2.2k 收藏
点赞数
分类专栏： webpack react 文章标签： webpack4  react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37653449/article/details/81570879
版权

在开发过程中 遇到 webpack build 失败的情况   如下图 

npm ERR! This is probably not a problem with npm. There is likely additional log
ging output above.

npm ERR! Exit status 2

无任何有效的错误提示 这种情况下  很难定位错误位置  

 

这种情况下 在我们的打包命令中  加这么一句  输出打包信息的 具体情况   那么  很快就能定位到错误所在 

 

 

 

这就 是我们打包编译的实时信息  很快问题就能迎刃而解

 

写在最后：欢迎加我wx    wangchen20180818 交流，学习

RemoteLight
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
terser-webpack-plugin：Terser插件
02-06
terser-webpack-plugin 该插件使用来缩小JavaScript。 入门 如果您使用的是webpack v5或更高版本，则无需安装此插件。 Webpack v5随附了最新的terser-webpack-plugin 。 使用Webpack v4，您必须安装terser-webpack-plugin v4。 首先，您需要安装terser-webpack-plugin ： $ npm install terser-webpack-plugin --save-dev 然后将插件添加到您的webpack配置中。 例如： webpack.config.js const Ter
webpack-使用webpack-dev-server.rar
04-12
webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载。这里用一个最简单的例子，让大家迅速的了解原理，避免被其他的附加技术干扰。
webpack-dev-middleware：用于webpack的开发中间件
02-06
webpack-dev-中间件 与捆绑包一起使用的快速开发中间件，可用于服务从Webpack发出的文件。 这应该仅用于开发。 使用此中间件的一些好处包括： 没有文件写入磁盘，而是处理内存中的文件 如果文件以监视模式更改，则中间件将延迟请求，直到编译完成。 支持热模块重新加载（HMR）。 入门 首先，安装模块： npm install webpack-dev-middleware --save-dev 注意：我们不建议全局安装此模块。 用法 const webpack = require ( 'webpack' ) ; const middleware = require ( 'web
web-webpack-plugin：替代html-webpack-plugin
02-03
web-webpack-plugin 想全面学习Webpack？试试它： 不错替代品，可以使webpack将HTML用作条目并处理多页。 安装 npm i web-webpack-plugin --save-dev const { WebPlugin , AutoWebPlugin } = require ( 'web-webpack-plugin' ) ; 特征 输出html文件 webpack配置 module . exports = { entry : { A : './a' , B : './b' , } , plugins : [ new WebPlugin (
stats-webpack-plugin:将构建的统计信息写入文件
05-11
Webpack的统计插件 将构建的统计信息写入文件。 安装 $ npm install --save-dev stats-webpack-plugin 用法 var StatsPlugin = require ( 'stats-webpack-plugin' ) ; module . exports = { plugins : [ new StatsPlugin ( 'stats.json' , { chunkModules : true , exclude : [ / node_modules [ \\ \/ ] react / ] } ) ] } ; 为--profile标志或设置profile: true在webpack.config为profile: true ，以获取详细的计时度量。 有关更多详细信息，请参见。 原料药 new
Webpack的基础使用和简单优化
Little_Pig_Bug的博客
09-03 473
webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。 当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个bundle。 为什么要使用webpack 1. 与react一类模块化开发的框架搭配着用比较好。 2. 属于配置型的构建工具，比较用容易上手。 3. webpack使用内存来对构建内容进行缓存，构建过程中会比较快 webpack的核心概念 1. ..
webpack构建优化实战
bob_baobao的博客
03-30 1001
背景 随着项目的推移， 第三库使用数量增加，业务代码更是成倍增加，不知不觉发现webpack构建速度却越来越慢，从当初的30s，变成5分钟以上。 与此同时，一个同学的项目也遇到了打包慢的问题。 于是下定决心，花两周潜心研究下如何提升webpack构建性能。 初步成果 两周后，收获满满的。初步战果如下： （1） 自己的项目： vue2(全家桶)+element-ui+axios+echa...
webpack系统学习（六）打包分析，Preload和Prefetch
Niall_Tonshall的博客
02-14 3170
1. 打包分析 我们需要在使用webpack的时候添加一些配置： webpack --profile --json > stats.json 这个配置会在打包完成之后生成一个stats.json文件，这个文件中就包含了一些打包过程和打包结果的很多信息，我们可以借助下面的几个网站来上传该文件并分析： http://webpack.github.com/analyse/； http://alexkuz.github.io/webpack-chart/； 这里我推荐使用Webpack Bundle Ana
常用的webpack优化方法
LSS2288的博客
09-23 5005
常用的webpack优化方法：1.提高webpack打包速度2.缩小webpack打包体积。
性能优化 - 查看 webpack 打包后所有的依赖关系（webpack 可视化工具）
热门推荐
White feathe 的博客
11-16 3万+
查看 webpack 打包后所有组件与组件间的依赖关系，针对多余的包文件过大，剔除首次影响加载的效率问题进行剔除修改，本次采用的是 ==webpack-bundle-analyzer==（可视化视图查看器）== 介绍1：webpack-bundle-analyzer（可视化）==将捆绑内容表示为方便的交互式可缩放树形图如下效果图：模块功能： 意识到你的文件打包压缩后中真正的内容 找出哪些模块组成最大
webpackbar：用于Webpack 3、4和5的优雅ProgressBar和Profiler
02-06
用于Webpack的优雅ProgressBar和Profiler :check_mark: 在建造或观看时显示优雅的进度条 :check_mark: 支持多个并发构建（对SSR有用） :check_mark: 漂亮的打印文件名和加载程序 :check_mark: Windows兼容 :check_mark: 使用记者完全可定制 :check_mark: 先进的构建探查器 多进度条 构建探查器 入门 首先，您需要安装webpackbar ： 使用npm： npm install webpackbar -D 使用纱线： yarn add webpackbar -D 然后将报告程序作为插件添加到您的webpack配置中。 webpack.config.js const webpack = requ
webpack-upload-plugin:Webpack插件
05-13
webpack-upload-plugin 介绍 这是的插件。 主要目的是提供一个工具，用于将html（或其他语言的模板）中使用的js / css / img / font上传到cdn，然后将引用替换为相应的cdn url。 环境要求 节点> = 10.5.0 安装 npm i -D webpack-upload-plugin 注意 该插件不提供上传至CDN的服务。 实际上，它实际上取决于这种服务。 此插件适用于Webpack> = 3。 对于webpack @ 4，将optimization.minimize设置为false ！ 该插件不能与UglifyJs插件配合使用！ 如果仍要压缩，请使用beforeUpload 。 要格外注意你publicPath领域webpack.config.js ， ''可能是最好的选择。 对于webpack @ 2，请使用webpack-upl
Webpack 构建速度优化
大灰狼的小绵羊哥哥的博客
03-21 1049
如何输出Webpack构建分析 输出Webpack构建信息的.json文件：webpack --profile --json > stats.json --profile:记录构建中的耗时信息 --json:以json格式输出构建结果，最后只输出一个json文件（包含所有的构建信息） web可视化查看构建分析：得到了webpack构建信息文件stats.json，如何进行很好的可视化...
webpack4打包优化之可视化分析
weixin_40073115的博客
12-18 778
能否对打包结果进行优化是webpack掌握水平的终极体现，要优化我们就要做到有的放矢，明确优化的目标，本篇博文介绍下怎么能够可视化的去分析当前打包的各项数据指标。 1.控制台信息 如上图给句chunks列表信息我们能够看到打包之后生成的打包文件信息，包括大小以及总的时间，但是这个太粗，我们在优化中更想知道每一个文件用时情况。而且最好能把每次打包结果分析数据保存以便与最后的样本分析以证明优化效果对...
webpack之输出结果分析
richest_qi的博客
05-28 1487
两步走。 项目根目录下webpack --profile --json > stats.json，生成stats.json文件 --profile，记录构建的耗时信息； --json，输出结果以JSON格式保存； > stats.json，输出结果保存在stats.json文件中。 一个前提：全局安装了webpack， npm install -g webpack 一个必须：json文件名必须是stats.json 将 stats.json导入 可视化工具 并分析 两种可视化工具供选择。 第一
Webpack 命令行参数详解
大V的博客
08-20 8470
很多小伙伴在每次用到package.json中的npm scripts时，总是被里面的各种命令行参数搞得头大。本文将针对webpack，对其命令行参数进行详解，希望读者们能借此搞清楚每个参数的作用，并在使用时能知道其含义。 "scripts": { "build": "./node_modules/.bin/webpack --bail --progress --profile --m...
构建优化（webpack 优化）
雪急飞绪博客
03-10 1989
webpack 优化配置 webpack4 引入了 mode 模式，可以配置开发和生产模式，就可以使用一些已经默认好的插件帮我们达到想做的效果 Tree-shaking 上下文未用到的代码（dead code） 给予 ES6 import export Tree-shaking 基础：无论是自己还是第三方，必须是模块化的，要基于 ES6 import export 导入导出的形式才可以，生产模式会默认启动 Tree-shaking，主要依赖于 TerserPlugin 插件 Tree-shakin
webpack命令行
weixin_33898876的博客
06-16 542
前面的话 　　webpack提供了命令行接口（CLI），以便对构建过程进行配置和交互。这对于制定早期原型、轮廓、编写 npm 脚本 或者一些个人自定义需求很有用。本文将详细介绍webpack的命令行接口   常用配置 【--help】 　　列出命令行所有可用的配置选项 webpack --help webpack -h 【--config】 　　指定其它的配置文件。配置文...
react 中的 function Component
qq_37653449的博客
03-26 6787
因为hooks的出现 解决了函数式 组件没有生命周期的一个痛点 同时也有一些新的坑等待我们 遇到的第一个坑就在配置了react-hot-loader的情况下无法使用hoosk原因是react-hot-loader的那个babel插件的问题 可能在解析某些语法上做了特殊的处理 class Component 和 function Component 的区别 为什么要了解 Function 写法的组件...
webpack webpack-cli webpack-dev-server配置
最新发布
08-16
npm install webpack webpack-cli webpack-dev-server --save-dev ``` 4. 在项目根目录下创建一个`webpack.config.js`文件，并添加以下基本配置： ```javascript const path = require('path'); module....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值