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的东西)
相关推荐
独立开阀者_FwtCoder2 分钟前
面试官:为什么在 Vue3 中 ref 变量要用 .value?
前端·javascript·vue.js
NetX行者5 分钟前
基于Vue 3的AI前端框架汇总及工具对比表
前端·vue.js·人工智能·前端框架·开源
独立开阀者_FwtCoder5 分钟前
手握两大前端框架,Vercel 再出手拿下 Nuxt.js,对前端有什么影响?
前端·javascript·vue.js
独立开阀者_FwtCoder6 分钟前
弃用 html2canvas!快 93 倍的截图神器!
前端·javascript·vue.js
weixin_3993806920 分钟前
TongWeb8.0.9.0.3部署后端应用,前端访问后端报405(by sy+lqw)
前端
伍哥的传说41 分钟前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
洛小豆1 小时前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
洛小豆1 小时前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js
叹一曲当时只道是寻常1 小时前
Softhub软件下载站实战开发(十六):仪表盘前端设计与实现
前端·golang
超级土豆粉2 小时前
npm 包 scheduler 介绍
前端·npm·node.js