前端打包工具webpack的基础认知

比眉伴天荒 2022-11-25 05:25 193阅读 0赞

# webpack #

webpack是一个构建工具，中文名称叫“静态资源打包器”。  
![在这里插入图片描述][20210416165416121.png]

## 一、webpack简介 ##

相对于原始的web前端开发（html+js+css），现在有很多的新技术。  
我最先接触到的是less，它支持变量、嵌套等功能，能帮助我更好的维护项目的css样式。  
然而，在使用less的过程中，虽然有管理css样式方便了；但是每次发版的时候还需要先把less文件先转成css文件才行；否则浏览器也不能识别，导致报错。

还有我们使用module.exports模块化编写js时，发版时也需要先进行编译后浏览器才能识别。  
因为这些种种的不方便，导致我们公式的项目一直还停留在最原始的html+js+css的阶段；严重印象了开发人员学习新技术的动力。

既然出现这种重复性的操作，那就给程序员展现技术的时候了。  
webpack就是把以上重复操作整合的一个构建工具。

## 二、基础概念 ##

*  模块（chunk）：前端的所有资源文件（js/json/css/less/img…）都作模块。`开发环境`
 *  资源（bundle）：打包生成的静态资源。`生产环境`

## 三、核心概念 ##

*  Netry： 入口，项目的入口文件；需根据此文件摇树，找到所有使用的资源文件。
 *  Output：出口，打包后的输出资源需要如何命名，放到哪儿。
 *  Loader：解析，负责处理js以外的文件，如less（webpack本身只能处理js/json等）。
 *  Plugins：插件，负责处理更复杂的任务，如压缩。
 *  Mode：模式，development开发（开发调试用）、 production生产模（上线发版用）。

## 四、npm指令 ##

*  npm init `npm初始化，在项目中创建npm配置相关资源`
 *  npm i webpack webpack-cli -g `全局安装webpack`
 *  npm i webpack webpack-cli -D `局部安装webpack，及安装到单个项目中`

## 五、webpack指令 ##

*  webpack ./src/xxx.js -o ./bundle/bundle.js --mode=development `以xxx.js为入口打包编译到bundle.js`

## 六、其他 ##

更多webpack内容：

*  [webpack - 点击跳转][webpack -]

[20210416165416121.png]: /images/20221124/db4f54c7e09145beac503cd3e306acea.png
[webpack -]: https://www.webpackjs.com/