webpack 学习笔记（一）

引言

最近在学习webpack，发现好多知识点，之前一点都没有接触过，如babel、core-js、browserslist等等。以前习惯了使用cli构建项目，很多东西不用考虑，拿来就用，这样的码农是不会有能力提升的，必须了解更多的知识点，才能成为一位出色的前端工程师。

我大致梳理了一下我的学习历程，将它简单的归类，以解决问题的路径娓娓道来。当然我的学习也不算完整，还在继续努力，也请各位大佬多多指导。

学习webpack首先必须拥有的基础是：

1.了解node.js是什么；

2.了解npm包管理器是什么以及package.json的常用属性的意义；

在此基础上，我们来一步步的学习webpack，以及如何使用webpack进行打包。

---

webpack 简介

webapck是一款前端资源打包工具，其最核心的功能是解决模块之间的依赖问题。听起来是不是很耳熟？对，没错，如果你学习过AMD规范、CommonJS规范，你会发现webpack是在这些规范的基础上发展出来的开源工具，解决前端开发人员模块化到工程化的问题。（PS:没有了解过AMD、CommonJS的小伙伴建议去简单了解一下，因为这是js模块化的基础，了解该基础才能理解前端模块化，而进一步理解前端工程化，才能明白webpack到底在干什么。）

这里简单说一下js模块化。很多小伙伴从切图仔进阶到前后端分离的前端工程模式时，都有些犯怵，一下子不理解前端工程到底是个什么概念，其实前端工程化说白了，就是在开发中大型web应用时，页面的交互非常频繁，很多计算、数据处理、业务代码都放在客户端（浏览器）进行处理了。那这么多的代码，怎么进行管理和维护呢，难道还是按照不同的页面