当我们执行npm run bundle的时候输出了很多信息,那么这些信息都是什么意思呢
Hash: 221e7fd2e8bf82149df7
Version: webpack 4.30.0
Time: 141ms
Built at: 2019-04-15 06:37:26
Asset Size Chunks Chunk Names
bundle.js 1.38 KiB 0 [emitted] main
Entrypoint main = bundle.js
[0] ./src/index.js 159 bytes {0} [built]
[1] ./src/header.js 203 bytes {0} [built]
[2] ./src/sidebar.js 210 bytes {0} [built]
[3] ./src/content.js 209 bytes {0} [built]
Hash:代表本次打包唯一一个hash值。
version,这次使用的webpack打包版本是4.30.0这个版本
time:当前包整体打包耗时
asset:这个字段下面是bundle.js,他表示的是,我们打包出了一个bundle.js文件。
size: 表示这个文件大小是1.38kb
chunks: 打包文件的id,现在只有一个bundle.js打包文件,有多个的时候,会有多个不同的chunk
Chunk Names: 打包文件的名字。
这个main是怎么来的,配置文件里面并没有这个main,实际上
entry: './src/index.js',
entry: {
main: './src/index.js'
},
的简写。

浅析webpack打包输出内容的更多相关文章

  1. 使用webpack打包ThinkPHP的资源文件

    使用webpack打包ThinkPHP的资源文件 利用自己的空余时间一直在维护http://www.wx2share.com这个小网站,全是一个人在弄,由于只租得起虚拟空间,所以后台采用了简单方便的T ...

  2. Webpack打包进阶

    说在前面 由于使用了React直出,页面各项性能指标使人悦目.本篇将深入探讨目前PC部落所采用webpack打包优化策略,以及探讨PC部落并未使用的 webpack Code Splitting 代码 ...

  3. Webpack打包构建太慢了?试试几个方法

    Webpack是个很流行的打包工具,但其打包速度却一直被吐槽着 如果不用上一些打包的优化建议,单单打包两三个文件就能花上好几秒,放上几十个入口文件依赖几百上千个包的话,几分钟十几分钟妥妥的 本文整理了 ...

  4. vue-cli+webpack打包配置

    vue-cli+webpack打包配置 一: 目录结构: ├── README.md ├── build │ ├── build.js │ ├── check-versions.js │ ├── ut ...

  5. 零基础学习webpack打包管理

    这些天在项目之余的时间学习了webpack打包项目的东西,非常荣幸的找到一些大神的文章来学习,死劲嚼了几天,终于略知一二.在以后的工作上还需继续学习,下面我将分享我这几天学到的一点东西,希望能让我一个 ...

  6. webpack打包理解

    webpack打包理解(将所有依赖文件打包到一个文件中) 由于前端代码变得越来越多,越来越复杂, 纯粹脚本化的代码书写方式已经不能满足工程化得需求. 前端模块被抽象出来, 不仅仅包括js模块, 其它如 ...

  7. webpack打包优化之外部扩展externals的实际应用

    目录 前言 externals定义 用法 string array object function regex 实际案例 打包时间 打包之后包的大小 浏览器加载 需要注意 参考 前言 使用vue-cl ...

  8. webpack打包和gulp打包工具详细教程

    30分钟手把手教你学webpack实战 阅读目录 一:什么是webpack? 他有什么优点? 二:如何安装和配置 三:理解webpack加载器 四:理解less-loader加载器的使用 五:理解ba ...

  9. webpack打包经验——处理打包文件体积过大的问题

    前言 最近对一个比较老的公司项目做了一次优化,处理的主要是webpack打包文件体积过大的问题. 这里就写一下对于webpack打包优化的一些经验. 主要分为以下几个方面: 去掉开发环境下的配置 Ex ...

随机推荐

  1. C#导入Excel|读取Excel方法

    OleDbConnection读取 /// <summary>       /// 返回Excel数据源       /// </summary>       /// < ...

  2. Spring学习笔记:面向切面编程AOP(Aspect Oriented Programming)

    一.面向切面编程AOP 目标:让我们可以“专心做事”,避免繁杂重复的功能编码 原理:将复杂的需求分解出不同方面,将公共功能集中解决 *****所谓面向切面编程,是一种通过预编译方式和运行期动态代理实现 ...

  3. Spring课程 Spring入门篇 5-5 advice应用(下)

    2 代码演练 2.1 环绕通知(不带参数) 2.2 环绕通知(带参数) 2 代码演练 2.1 环绕通知(不带参数) 实体类: package com.imooc.aop.schema.advice.b ...

  4. H5安卓端浏览器如何去除select的边框?

    H5安卓端浏览器如何去除select的边框? android下没有问题,在apple下无三角号. -webkit-appearance:none; border-radius:0

  5. pyhton基础

    python是一种什么语言?python是一种动态解释性的强类型定义的语言(1)编程语言分类 编译型: 把源程序的每一条语句都编译成机器语言,并保存成二进制文件, 这样运行时计算机可以直接以机器语言来 ...

  6. CSS 盒子模型及 float 和 position

    ## CSS和模型 ##CSS盒模型本质上是一个盒子,封装周围的 HTML 元素,包括 外边距(marign),边框(border),填充(padding),内容物(content) 盒子模型的类型: ...

  7. JavaScript switch语句

    JavaScriptswitch语句 switch语句用于基于不同的条件来执行不同的动作. JavaScript switch 语句 使用switch语句可以进行多项选择. 语法: switch( 变 ...

  8. csharp:Convert Image to Base64 String and Base64 String to Image

    /// <summary> /// 图像转成二进制数组 /// </summary> /// <param name="imageIn">< ...

  9. HADOOP背景介绍

    1. HADOOP背景介绍 1.1 什么是HADOOP 1. HADOOP是apache旗下的一套开源软件平台 2. HADOOP提供的功能:利用服务器集群,根据用户的自定义业务逻辑,对海量数据进行分 ...

  10. mysql的一些sql用法

    mysql中修改列名: alter table 表名 change abc def 列类型;比如 alter table student change pws psw char(10);