webpack打包工具入门 (一)

前言：

webpack是前端人员常用到的打包工具，包括vuecli搭建自带webpack。所以面试一家公司，基本都会问到关于webpack的面试题 ， 学习webpack是必经之路 。

什么是webpack？为什么要使用它？

webpack可以理解为，将程序员编写的源代码，经过压缩、编译、语法检查…等一系列操作，编译成浏览器可以识别的代码，优化性能。webpack是个前端打包器，前端所有的资源都可以当作模块（js、css、img、json…）

有些时候我们编写的模块化、typescript、less等，这些东西加快了我们的开发速度，但浏览器并不是完全支持这些语言，这就是为webpack类工具提供了需求！

webpack四大核心概念

• entry（入口文件，要编译的js文件，可多个）
• output（输出文件）
• loader（让webpack可以处理非js、json文件，如：less、img）
• plugins（插件，处理loader处理不了的，比如：清空输出文件）

简单使用

全局安装webpack

npm install -g webpack
npm install -g webpack-cl

1. webpack是在node环境下运行的，这里的npm也是node的，所以需要提前安装node。
2. webpack