10.1 前端工程化与webpack
webpack的主要使用场景是单页面富应用（SPA）。SPA通常是由一个html文件和一堆按需加载的js组成，它的html结构可能会非常简单。
ES6语法：export和import是用来导出和导入模块的。一个模块就是一个js文件，它拥有独立的作用域，里面定义的变量外部是无法获取的。使用export default来输出默认的模块，在导入时可以自定义名字。
10.2 webpack基础配置
10.2.1 安装webpack与webpack-dev-server
webpack-dev-server 可以在开发环境中提供很多服务，比如启动一个服务器、热更新、接口代理等。
10.2.2 就是一个js文件而已
webpack就是一个.js配置文件。
在package.json的scripts里增加一个快速启动webpack-dev-server服务的脚本：
{
"scripts" :｛
"test":"echo \"Error: no test specified\" && exit 1",
"dev":"webpack-dev-server --open --config webpack.config.js"
}
}当运行npm run dev命令时，就会执行后面的命令。其中–config是指open向webpack-dev-server读取的配置文件路径。–open 自动在浏览器打开页面，默认地址是127.0.0.1:8080。
webpack配置中最重要也是必选的两项是人口（Entry）和出口（Output）。入口的作用是告诉webpack从哪里开始寻找依赖，并且编译，出口则用来配置编译后的文件存储位置和文件名。
10.2.3 逐步完善配置文件
在webpack的世界里，每个文件都是一个模块。对于不同的模块，需要用不同的加载器（Loaders）来处理，而加载器就是webpack最重要的功能。
通过安装不同的加载器可以对各种后缀名的文件进行处理。
在module对的rules属性中可以指定一系列的loaders，每一个loader都必须包含test和use两个选项。
webpack的插件功能很强大而且可以定制。
webpack只不过是一个js配置文件，只要搞清楚入口（entry）、出口（output）、加载器（loaders）和插件（plugins）
10.3 单文件组件与vue-loader
.vue单文件组件就是一个后缀名为.vue的文件,在webpack中使用vue-loader就可以对.vue格式的文件进行处理。
一个.vue文件一般包含3部分，即、