第10章 使用webpack
10.1 前段工程化与webpack
Webpack是前段工程化工具，打包后已经不只是你写的代码，而是webpack自身的模块处理代码。业务中各种格式的文件通过特定的加载器（Loader）编译后，最终生成为js、css、png等静态资源文件。在webpack世界里，一张图片甚至一个字体都称为模块（module），彼此存在依赖关系，webpack就是用来处理模块间的依赖关系的。
Webpack主要用于单页面敷应用（SPA），SPA通常是一个html文件和一堆要加载的js组成。例如：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>webpack app</title>
<link rel="stylesheet" href="dist/main.css">
</head>
</html>
<body>
<div id="app"></div>
<script type="text/javascript" src="dist/main.js"></script>
</body>
</html>
ES6中有两个语法export和import，export和import是用来导出和导入模块的。一个模块就是一个js文件，它拥有独立的作用域，里面定义的变量外部是无法获取的。
//config.js
var Config = {
version:'1.0.0'
};
export {Config};
或
//config.js
export var Config = {
version:'1.0.0'
};
10.2 webpack基础配置
10.2.1 安装webpack与webpack-dev-server
安装前确保安装了node.js和npm。使用npm初始化配置。
Npm init //初始化配置
Npm install webpack –save-dev //本地局部安装webpack
Npm install webpack-dev-server –save-dev //本地局部安装webpack-dev-server，它可以在开发环境中提供很多服务，比如启动服务器、热更新、借口代理等。
10.2.2 就是一个js文件而已
Webpack中最重要的两个必选项就是说入口和出口。
入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。默认值为 ./src。
output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。
10.3 单文件组件与vue-loader
Vue.js是一个渐进式的js框架，在使用wewbpack构建Vue项目时，可以使用一种新的构建模式：.vue单文件组件。就是一个后缀名为.vue的文件，在webpack中使用vue-loader就可以对.vue格式的文件进行处理。一个.vue文件一般包含3部分，即<template>、<script>和<style>，<template之间的代码就是该组件的模板HTML,style之间的是CSS样式。
使用.vue文件需要先安装vue-loader、vue-style-loaer等加载器并做配置。如果要使用ES6的语法，还需要安装babel和babel-loader等加载器。修改配置文件等操作。
参考：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83149525
参考：https://www.webpackjs.com/concepts/#%E5%85%A5%E5%8F%A3-entry-
8446
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
