我们的原生项目可以从github.com/pengchangju… 把源码下载下来，如下图：
源码分析
在改造之前，我们需要对原生项目的结构和逻辑进行分析，看这个项目是如何实现的。首先来分析下inde.html的结构。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8" />
<title>最家</title>
<link rel="stylesheet" type="text/css" href="css/public.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
</head>
<body>
<!------------------------------head------------------------------>
<div class="head"></div>
<!-------------------------banner--------------------------->
<div class="block_home_slider"></div>
<!-- ......省略 -->
<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="js/public.js" type="text/javascript"></script>
<script src="js/nav.js" type="text/javascript"></script>
<script src="js/jquery.flexslider-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#home_slider').flexslider({ animation: 'slide'......})
})
</script>
</body>
</html>
css 文件
index.html引入了 css/public.css 和 css/index.css，其中 public.css 是公共样式部分，index.css 是首页特有的样式。
js 文件
index.html引入了 js/jquery-1.12.4.min.js，js/public.js，js/nav.js，js/jquery.flexslider-min.js 4个js文件。jquery 负责操作 DOM，nav.js负责菜单导航的逻辑，public.js负责公共逻辑，flexslider是一个用于轮播图的第三方库。
通过分析，可以发现存在一下几个问题:
-
css 和 js 资源多，且全部采用同步加载，渲染时需要多次请求和加载，降低页面性能。即资源都是一种分散状态，没有进行适当的合并。
-
css 和 js 资源都是以源码形式展示，没有进行压缩。
-
整个开发模式比较落后，码逻辑和结构不清晰。进行项目迭代时，需要同时改动 html/css/js，迭代困难。
-
项目不支持
source-map，调试困难。比如，项目中引用了jquery.min.js 的文件，这些文件是压缩的，没法调试。
针对以上问题怎么解决呢？
改造流程梳理
针对css 和 js 资源分散且没有压缩的问题
我们可以通过 webpack 把所有资源打成一个包(bundle.js)，但是如果打成一个包，文件将会非常大，特别当是 css 中有几百kb 的图片，或者 js 中引入像 jquery lodash这样比较大的第三方库。
注意：除了css 和 js文件外，图片文件也会被打包。但是，只有在css中或者js中引入图片文件才会被视为一个资源(或者说是一个模块)。如果在 html 中引入图片，比如 img 标签，则不会被打包到bundle.js中。
这就涉及到代码分割的问题。也就是，我们会先把所有的css、js 或者图片等资源打包成一个bundle.js，然后在利用webpack的splitChunks等配置把 bundle.js 拆分成 css、js及图片等资源，只是拆分后的这些文件个数要少于拆分前的。
这里面的难点是，代码分割的粒度是多大？到底该用webpack怎么控制？这是我们要学习的精髓。这里要先澄清一点，我们打包是把chunk打包成bundle，在这个打包的过程中做拆分，即从chunk里面进行拆分，而不是从bundle里面拆分。
针对开发模式陈旧的问题
我们需要使用 Vue 框架来解决。在Vue项目中，一个.vue文件中包括了html、css、js代码， 修改的时候只需要在一个vue文件中改。如果可以的话，还可以把所有的 html 页面合并为一个单页应用(SPA)，加快开发速度。
如果你希望使用Vue，同时又希望对 SEO 友好，那么多页应用(MPA)就是一个好的选择。大部分的同学对使用 Vue 开发单页应用是有经验的，但是开发多页应用的机会不多。
针对不支持source-map的问题
在这个原生项目中通过<script>标签引入了jquery的压缩版本，像这种引入方式是无法进行source-map的。因此，必须要使用npm install来安装 jquery，因为npm下载的 js 文件当中会加入source-map的链接和source-map对应的文件。也就是npm包在上传的时候会打上source-map的内容，那么webpack就会顺势支持source-map的功能。
