什么是webpack

webpack本质上是一种前端资源编译、打包工具。

webpack被定义为现代 JavaScript 应用程序的静态模块打包器(module bundler)，是目前最为流行的JavaScript打包工具之一。

webpack会以一个或多个js文件为入口，递归检查每个js模块的依赖，从而构建一个依赖关系图(dependency graph)，然后依据该关系图，将整个应用程序打包成一个或多个bundle。

由于webpack是用nodejs编写的，所以它依赖的运行环境就是nodejs。

为什么要学习webpack

理解前端“工程化”概念、工具、目标
一个团队总要有那么几个人熟悉 Webpack，某种程度上可以成为个人的核心竞争力高阶前端必经之路

webpack的使用方法

关于 Webpack 的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类:

流程类:作用于流程中某个 or 若干个环节，直接影响打包效果的配置项
工具类:主流程之外，提供更多工程化能力的配置项

要在项目中使用webpack，需要首先安装nodejs，它是webpack的运行环境。nodejs安装成功后，就可以通过npm install webpack -g来全局安装webpack。这样就可以在你的项目中使用webpack了。

在项目中使用webpack的核心是编写配置文件。配置文件通常命名为webpack.config.js，是一个符合commonjs规范的js文件。该文件通过module.exports暴露出一个js对象，我们称这个对象为webpack的配置对象（options）。webpack会根据这个配置对象来决定如何打包项目。

如何处理webpack只认识js的问题

为了处理非标准 JS 资源，设计出资源翻译模块 -- Loader 用于将资源翻译为标准 JS

学习方法

入门应用

理解打包流程孰练掌握常用配置项。Loader、插件的使用方法，能够灵活搭建集成 Vue、React、Babel、Eslint、Less、Sass、图片处理等工具的 Webpack 环境日掌握常见脚手架工具的用法，例如:Vue-cli、create- react-app、@angular/cli

进阶

理解 Loader、Plugin 机制，能够自行开发 Webpack组件理解常见性能优化手段，并能用于解决实际问题理解前端工程化概念与生态现状

大师级

阅读源码，理解 Webpack 编译、打包原理，甚至能够参与共建

Webpack知识体系 | 青训营笔记