！！！注意：学习Vue，必下载的插件： ESLint

你将学到以下知识：

理解webpack是什么以及它的作用

能够使用webpack命令将一个文件打包输出为另一个文件

掌握webpack.config.js文件的作用及基本配置

了解webpack-dev-server的使用

了解html-webpack-plugin插件的使用方法

了解webpack处理图片及字体文件的方法

了解webpack处理less及scss的方法

了解webpack处理css文件的方法

vue-cli 脚手架工具

什么是webpack？

webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Sass，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

webpack是什么.png

为什么要使用webpack ？

它只是一个工具，主要是它已经帮助我们简化了很多复杂操作！例如：
现在的前端，越来越复杂，特别是SPA（single page web application）流行之后，一个应用程序往往会依赖很多其他的模块，或者编译scss、less、stylus等，如果仅仅是靠人来管理是不可能的，这个时候我们必须依赖于webpack来解决。

1、webpack安装

注意：请先安装node环境 https://nodejs.org/zh-cn/download/

  在 Mac 端要 添加个 sudo !!!

输入 命令 vue 查看一下 ,有东西说明成功了！（如果没有成功忽略）

执行 vue list 查看  

安装：webpack模板 （敲黑板！！！！）

输入命令:  vue init webpack 自己的工程名字 

出现如下图：

Vue命令下安装步骤.png

（成功后）cd 到自己的工程名字 （敲黑板！！！！）

（mac 最好输入前带 sudo）输入命令:  sudo npm run dev 
  运行成功了！！！

2、如何使用webpack？（了解）

2.1-webpack-cli ：就是告诉你它有什么用：将浏览器不支持的源文件打包转换为浏览器支持的文件

2.2-webpack-config：能够简化命令的输入。不用再指定源路径和目标路径

2.3-webpack-dev-server：能够自动打开浏览器，对于代码的修改能够自动刷新， 同时输入命令更爽

2.4-webpack-css:

可以来解析css
注意：

Module parse failed: Unexpected token (1:0)：以后凡是看到这种module 
parse的错误，都是没有没有添加对应的配置，你要做的分为两步：1.下载对应的包  2.添加对应的配置

安装：（用来解析.css文件的loader(style-loader和css-loader)）

npm install css-loader style-loader --save-dev

2.5-webpack-less&webpack-sass：（常用）

安装：可以创建和解析less和scss

npm install less less-loader sass-loader node-sass --save-dev

2.6-webpack-图片&字体：
可以使用图标和图片

npm install file-loader url-loader --save-dev

2.7-webpack-html：
在html文件中自动引入js文件

npm install html-webpack-plugin --save-dev

2.8-webpack-babel

npm install babel-core  babel-loader babel-preset-env --save-dev

3补充：这几张图网友画的

1、安装webpack后的Vue目录：

Vue目录.png

2、src目录必须理解

Vue的src.png
3、更加详细
更加详细.png

4、列表说明

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- utils.js                     // 构建工具相关
|   |-- vue-loader.conf.js           // webpack loader配置
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置,构建开发本地服务器
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|-- src                              // 源码目录
|   |-- components                   // vue公共组件
|   |-- router                       // vue的路由管理
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- .postcsssrc                       // postcss配置文件
|-- README.md                        // 项目说明
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息,包依赖信息等