思考
传统网页开发，基本就是 HTML + CSS + JQUERY 的模式。但现在网页越来复杂，很多网页其实就是一个APP，复杂度和以前的网页已经不是一个层级。实际上，现在人们已经在用 HTML + CSS + JS 开发各种APP，网页和APP的开发已经没有了界限。
在进行APP级别的开发时，传统HTML + CSS + JQUERY的模式就力不从心了，所以新的技术就诞生了。
首先，是JavaScript 语言的变化，出现了 ES6 标准，以前的 JavaScript 是 ES5标准，过于简单，比如没有模块的概念。而模块可以说是在进行大型项目开发时，使用的开发语言必不可少的一个特性。
但ES6的出现随之引入了另外一个问题，目前很多浏览器的对ES6的支持并不完善，也就是说如果代码中用了ES6的特性，碰到了不支持的浏览器，就没法运行，所以Babel就出现了，Babel 负责将 ES6 的源码转化成 ES5 源码。
关于 Webpack， 官方说它是一个打包器，但我觉得叫自动化构建工具很合适。比如，Webpack 可以调用 Babel 对 JS 代码进行转化，它自动化了转化这个步骤，不需要你手动去操作 Babel 一个一个对JS源文件进行转化。
然后关于Webpack 打包这个最基础的功能，可以这样理解，就是将一个JS源文件引用的所有模块(这个模块就是上面提到的ES6中的模块的概念)打包到一个JS文件里面，然后HTML页面只需要引用这个打包后的JS文件就可以了，而不是像在传统网页开发里面，用<script>、<style>标签一一引用用到的JS、CSS文件。这个过程有点像C++程序的编译，源代码有好多文件，但编译后的结果只有一个 .exe文件。
更进一步，正是因为 Webpack 能让我们自动化对JS文件进行一些处理，才有了 VUE的单文件组件开发模式、TypeScript这些东西。总而言之，甭管你源码用咋写，写啥，只有在用Webpack 自动化处理之后的JS代码能在浏览器运行，那就没问题。
上面ES6、Webpack 一个是从语言角度，一个是从构建角度出现的新技术。Vue、React之类则是从网页开发角度出现的新技术，相比于 JQUERY 指直接操作 DOM，它们提供了一种更方便、更强大操作DOM的方式，也让使用HTML开发APP真正成为现实。
在传统项目中引入现代Web开发技术
以一个基于的Laravel的传统项目为例，可以分为三种层次。
- 直接引入Vue等新的开发框架。原生Vue等只是提供了一种新的操作DOM的方式，并没有使用ES6之类的新的语言标准（即使使用了，本身也会提供转换过后的版本），所以直接使用就好，并不需要用Webpack做什么预处理
- 使用基于Vue等开发的UI框架，如Ant Design of Vue。这类框架虽然在开发时都采用了ES6或者其他的一些新的技术（如Ant Design of Vue使用的Vue的单文件组件），但也可以直接使用，但要选择它们提供的经过转化之后的版本，或者自己用Webpack进行转换。
- 全面引入新技术。以在一个基于的Laravel的传统项目中使用 ES6 + Ant Design of Vue + Vue 的单文件组件为例，基本思路，每一个View 对应一个 Vue单文件组件，原本放到View文件中的内容都放到Vue单文件组件中，然后在View对应的blade文件中，只需要引入这个组件就可以了，至于Laravel 与blade 文件的交互（指Laravel通过传变量给blade文件控制blade文件的显示），可以通过将这些变量转成JS变量，然后传给这个View对应的Vue单文件组件。示例如下：
// view 文件
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<-- view 文件对应的Vue组件编译后的 css 文件 -->
<link href="/css/app.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
</div>
<script type="text/javascript">
// 将Laravel传给view的变量都转成JS变量，从而传给VUE组件，
// 用于控制页面显示
var msg = "{{ isset($msg) ? $msg : 'welcome' }}";
</script>
<-- view 文件对应的Vue组件编译后的 js 文件 -->
<script type="text/javascript" src="/js/manifest.js"></script>
<script type="text/javascript" src="/js/vendor.js"></script>
<script type="text/javascript" src="/js/app.js"></script>
</body>
</html>// view 对应的入口文件
import Vue from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
Vue.use(Antd);
// ExampleComponent 包含原本放到 view 文件里的一切内容
import ExampleComponent from './components/ExampleComponent.vue'
// msg 变量对应view文件中的msg变量，这里用它初始化组件。
new Vue({
render: h => h(ExampleComponent, {props: {msg:msg}}),
}).$mount('#app')- 更进一步，前端完全单独架构，后端只负责提供数据接口。暂时就不在继续探索了。
html5
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。