美文网首页前端--从Vue-cli配置学Webpack
什么是构建?webpack打包思想?

什么是构建?webpack打包思想?

作者: 下一站深圳 | 来源:发表于2017-09-18 11:01 被阅读0次

旧的网页请求:
  网页= html + js + css + picture + font 等一系列资源文件
  浏览器访问时一个页面,同时也会发出对资源文件的请求,造成不好的是:多个请求,影响浏览器响应速度,用户看到白屏时间过长(最好做成一个请求就能get到全部);其二,很多文件没有压缩过,返回的文件里的字节流比压缩过的大很多;其三,你代码中可能有很多注释你不想展示给客户,但是代码注释不能删除。

前端构建的方式:
  Webpack可以把网页的所以需要的 js css 图片等资源整体打包压缩,用户只需请求你的打包后的文件,请求数大大减少,浏览器的响应速度变快,减少用户的等待时间。所以这就是我们需要前端构建的原因

webpack的打包思想:chunk思想
  chunk,块。 webpack 分析一个网页中所需要的js文件,css文件,font文件,每一个文件都是一块一块,以及各自文件所依赖的文件,形成一个依赖树。然后webpack根据文件的类型,采用不同的loader做处理,比如js文件,用babel-loader将es6转换,css 文件用post-loader做兼容处理等,然后输入到html文件里面,这样用户只需访问你的index.html就可以了,减少了很多请求。所以我理解成"鲜花公式":
  鲜花(网页) = 外层包装纸(html) + js (鲜花) + css(绿叶)+ 其他装饰物(font等其他资源文件)
官网是这么称呼的:
打包后是Bundle, 一捆
每一个模块文件是chunk, 块

系列文章:
《什么是构建? webpack打包思想?》
《webpack基础使用》
《从vue-cli学webpack配置1——针对webpack2》
《从vue-cli学webpack配置2——针对webpack3》
《webpack 、mainfest 、runtime 、缓存与CommonsChunkPlugin》
《webpack打包慢的解决方案》

相关文章

  • webpack基础使用

    上一篇《什么是构建?webpack打包思想》webpack是在node环境里跑的,所以先搭建构建环境。node的安...

  • 什么是构建?webpack打包思想?

    旧的网页请求:网页= html + js + css + picture + font 等一系列资源文件浏览器访问...

  • webpack的使用

    认识webpack 什么是webpack ​ webpack是一个前端的模块化打包(构建)的工具 功能:​- 1...

  • webpack

    概念 ==> webpack 是什么?? 前端模块化打包(构建)工具 webpack 的两个方面 1.打包 ...

  • webpack详解

    webpack 介绍 webpack 是什么 为什么引入新的打包工具 webpack 核心思想 webpack 安...

  • webpack 入门

    一、Webpack 简介 1.1 webpack 是什么 webpack 是一种前端资源构建工具,一个静态模块打包...

  • webpack简单使用

    一、webpack简介 1.webpack是什么 webpack项目打包工具,项目构建工具 2.webpack有什...

  • webpack简介

    目录 webpack是什么,有哪些同类工具webpack项目打包工具,项目构建工具,有什么作用构建单页应用(dis...

  • webpack 是什么

    1.1. 什么是webpack webpack是nodejs的一个模块,该模块提供了构建前端开发环境(打包,转码,...

  • Webpack 高频面试题汇总

    # 什么是 webpack webpack 是一个打包模块化 JavaScript 的工具,专注构建模块化项目,在...

网友评论

    本文标题:什么是构建?webpack打包思想?

    本文链接:https://www.haomeiwen.com/subject/shgvsxtx.html