这是我参与「第五届青训营 」笔记创作活动的第13天。
前言
本节课老师的目的就是由浅入深，从应用技巧到组件开发，再到 Webpack 构建流程的基本原理剖析，最后总结一套学习方法论，帮助我们0基础搭建 Webpack 知识体系。
安装浏览器
请下载安装最新版本 NodeJS 环境； 请下载安装一个「现代」浏览器，比如 Chrome、Firefox、Edge 等。推荐使用最新版的 Chrome 浏览器。
安装编辑器
要进行前端开发，一个趁手的编辑器必不可少。强烈推荐使用 Visual Studio Code，如果你习惯使用其它编辑器也是可以的。
提前阅读
课前建议先充分了解 Webpack 的基本功能与作用，参考资料：Webpack 官网，建议根据官网文档手动搭建若干示例。
前端工程化
- 模块化（js的模块化、css的模块化、资源的模块化）
- 组件化（复用现有的UI结构、样式、行为）
- 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、Git分支管理）
- 自动化（自动化构建、自动部署、自动化测试）
什么是webpack
概念：webpack是前端项目工程化的具体解决方案 主要功能：它能提供友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端javaScript的兼容性、性能优化等强大的功能 好处：让程序员把工作的重心放到具体功能的实现上，提高了前端的开发效率和项目的可维护性 注意：目前Vue，React等前端项目，基本上都是基于webpack进行工程化开发的
webpack的基本使用
需要在终端运行命令，安装webpack相关的两个包然后进行配置
关于Webpack的使用方法，基本都围绕“配置”展开，而这些配置大致可划分为两类：
- 流程类：作用于流程中某个or若干个环节，直接影响打包效果的配置项
- 工具类：主流程之外，提供更多工程化能力的配置项
1.创建项目（在自定义的路径下创建一个空文件夹webpack-study),创建完毕后,在IDEA中打开。
2.创建一个名为modules的目录，用于放置JS模块等资源文件
3.在modules下创建模块文件，如hello.js,用于编写JS模块相关代码；
4.在modules下创建一个名为main.js的主入口文件，用于打包时设置entry属性
5.在项目目录下创建webpack.config.js配置文件，使用webpack命令打包（以管理员身份输入）
6.在项目路径下创建HTML页面，如index.html,导入Webpack打包后的JS文件
7.运行HTMl的效果
理解Loader
什么是loader
loader是webpack中一个非常核心的概念。
webpack用来做什么呢？
在我们之前的实例中，我们主要是用webpack来处理我们写的js代码，并且webpack会自动处理js之间相关的依赖。
但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css、图片，也包括 一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。
对于webpack本身的能力来说，对于这些转化是不支持的。
我们需要给webpack扩展对应的loader就可以了。
