webpack详细介绍以及安装过程

认识webpack

  1. 事实上随着前端的快速发展,目前前端的开发已经变的越来越复杂了:
  • 比如开发过程中我们需要通过模块化的方式来开发;
  • 比如也会使用一些高级的特性来加快我们的开发效率或者安全性,比如通过ES6+、TypeScript开发脚本逻辑,
  • 通过sass、less等方式来编写css样式代码;
  • 比如开发过程中,我们还希望实时的监听文件的变化来并且反映到浏览器上,提高开发的效率;
  • 比如开发完成后我们还需要将代码进行压缩、合并以及其他相关的优化;
  • 等等....
  1. 但是对于很多的前端开发者来说,并不需要思考这些问题,日常的开发中根本就没有面临这些问题:
  • 这是因为目前前端开发我们通常都会直接使用三大框架来开发:Vue、React、Angular;
  • 但是事实上,这三大框架的创建过程我们都是借助于脚手架(CLI)的;
  • 事实上Vue-CLI、create-react-app、Angular-CLI都是基于webpack来帮助我们支持模块化、less、 TypeScript、打包优化等的;

Webpack到底是什么呢?

  • 我们先来看一下官方的解释:

webpack是一个静态的模块化打包工具,为现代的JavaScript应用程序;

  • 我们来对上面的解释进行拆解:
  • 打包bundler:webpack可以将帮助我们进行打包,所以它是一个打包工具
  • 静态的static:这样表述的原因是我们最终可以将代码打包成最终的静态资源(部署到静态服务器);
  • 模块化module:webpack默认支持各种模块化开发,ES Module、CommonJS、AMD等;
  • 现代的modern:我们前端说过,正是因为现代前端开发面临各种各样的问题,才催生了webpack的出现和发 展;

Webpack官方的图片

Vue项目加载的文件有哪些呢?

  1. JavaScript的打包:
  • 将ES6转换成ES5的语法;
  • TypeScript的处理,将其转换成JavaScript;
  1. Css的处理:
  • CSS文件模块的加载、提取;
  • Less、Sass等预处理器的处理;
  1. 资源文件img、font:
  • 图片img文件的加载;
  • 字体font文件的加载;
  1. HTML资源的处理:
  • 打包HTML资源文件;
  1. 处理vue项目的SFC文件.vue文件;

Webpack的使用前提

  • webpack的官方文档是webpack.js.org/
    • webpack的中文官方文档是webpack.docschina.org/
    • DOCUMENTATION:文档详情,也是我们最关注的
  • Webpack的运行是依赖Node环境的,所以我们电脑上必须有Node环境
    • 所以我们需要先安装Node.js,并且同时会安装npm;
    • Node官方网站:nodejs.org/

Webpack的安装

  • webpack的安装目前分为两个:webpack、webpack-cli
  • 那么它们是什么关系呢?
    • 执行webpack命令,会执行node_modules下的.bin目录下的webpack;
    • webpack在执行时是依赖webpack-cli的,如果没有安装就会报错;
    • 而webpack-cli中代码执行时,才是真正利用webpack进行编译和打包的过程;
    • 所以在安装webpack时,我们需要同时安装webpack-cli(第三方的脚手架事实上是没有使用webpack-cli的,而是类似于自己的vue-service-cli的东西)
相关推荐
y先森3 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy3 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿4 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡5 小时前
commitlint校验git提交信息
前端
虾球xz6 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇6 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒6 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员6 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
野槐6 小时前
前端图像处理(一)
前端