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

webpack

webpack是一个构建工具，中文名称叫“静态资源打包器”。

一、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 - 点击跳转