自2016年以来，越来越多的SPA（SinglePageApplication）被发现。 以前的应用往往是一堆通过url连接起来的html文件，但在SPA中，整个应用只有一个html文件，页面的变更只需部分替换组件即可完成。
（澄清一下，SPA的概念由来已久，作为服务器端开发，在关注后端的动态上会落后，后端的演变请向微软询问，这里就不描述了）
那为什么要用webpack等工具来开发呢？ 写过代码的人都知道，一个源代码文件可能会引用多个文件的代码，编译后导入的文件路径也可能会改变。 以java的maven为例，项目配置是放在main/java/resource中，但是编译后，虽然所有的资源文件都放在/classes/下，也就是项目的根目录下。 其次，一个源代码被多次引用，编译后如何复制代码，以减少项目整体大小。 实际开发中可能会出现更多的问题，并且当后端项目不断扩展时这样的问题会越来越突出，而webpack就是用来解决这一系列问题的。
然后简单说一下webpack，它是javascript中市场占有率比较大的一个包依赖管理和打包工具。 我们可以通过 webpack 轻松管理项目创建，列出最重要的几点：
通过一系列webpack插件设计更清晰的项目结构webpack描述，解决编译、资源分离、文件重定向等功能 配置服务器&热部署辅助开发
在阅读文章之前，先看看官网文档，生成自己的理解。
这里列出了webpack的配置，下面将用它作为反例。
webpack 配置概述
在单页应用程序中，会有一个文件来驱动整个应用程序，就像大多数C风格语言的main一样
方式。 这些文件称为entry，如entry配置项所示，index.js文件被配置为entry，当有人访问时，会首先执行该文件的代码。
在webpack中，entry也可以配置为多个entry。 事实上，你必须自己检查文档。
devtool选项是为开发者指定sourcemap的配置方法。 源代码编译压缩后生成的代码很难调试，就像java类一样。 解决方案是使用sourcemap来定位变量在源代码中的位置以寻求帮助。
output用于指定编译后的代码输出路径
输出选项
webpack支持应用程序发布，实际上是用于开发的。 热部署后，网页效果将与源代码同步，基本上所见即所得，节省大量精力。 而该选项需要安装 webpack-dev-server 插件。
关于这个插件，如果要提供外部访问，需要配置host和disableHostcheck，public选项也要写，填写你机器在局域网的ip，去掉这个选项可能会导致访问困难外部。
开发服务器配置
它连接着webpack最重要的部分，就是模块的配置。
模块选项
编译时，webpack 会通过该配置处理所有文件。 以上图为例，比如*.vue组件注册，vue文件中的图片、css等资源提取，es5/6/7降级编译，这一系列动作都是通过配置模块来指定的。 webpack会从entry指定的文件开始查找，并通过模块给出的测试将匹配的文件加载到对应的loader中进行处理。
webpack 将从入口处开始扫描所有关联的文件
解析配置用于说明模块在被引用时如何解析，先看图。
解析配置
例如，extensions 配置告诉 webpack 指定后缀的文件不需要写后缀，所以 import "../example.ts" 可以直接写 import "../example"。
并且别名使导入文件变得更加容易。 例如根目录下有一个名为util的文件夹。 我想引用上面的lang.js文件，所以import "../../util/lang"可以直接写成import "@root/util/lang"。
最后是插件webpack描述，如右图。
插件配置
webpack 插件有很多种。 上图仅列出了我在项目中使用的插件。 如需具体列表，请点击此处。
以上就是webpack的解释。 其实这篇文章只是为了引路。 关于webpack还有很多配置没有提到。 入门需要自己参考官方文档，然后一步步构建一个简单可用的项目。
