这是我参与「第四届青训营 」笔记创作活动的的第12天
什么是Webpack
webpack 是代码编译工具，有入口、出口、loader 和插件。webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。
主要功能：其天生就代码分割、模块化，webpack2.0中加入tree shaking，用来提取公共代码，去掉死亡代码。
使用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就可以了。
