搭建一个多页面的无依赖的工程化项目

最近金拱门比较火，咱们先戳开它的官网看看。

看完后，若是你老板要是让你作这么一个网站，必定要seo，必定要兼容IE，你会怎么去作呢？

用vue/react吧，单页应用知足不了seo，并且IE兼容性很差。上node中间层作服务端渲染又把事情搞麻烦了。只能用JQuery干，可是又该怎么作工程化呢？好像也不是很容易。由于目前你们的工程化方案可能是一整套单页应用全家桶，如vue-cli的webpack模板。

而前端到现在这个阶段，再让你们接手一个没有工程化的项目，确定心里很是抵触了。试想这么一个项目，手动link资源，不能写less/sass，不能写ES6，不能依赖管理，不能编译打包...，哦天，想都不敢想。但是工程化这事在实际业务中却没有你们想象中的那么顺利。好比刚刚金拱门的官网，页面不少，要求知足SEO，IE兼容。并且遇到这些项目，每每还会有这些问题：

1. 因为页面是后端渲染，须要部署后端程序（php,java之类），各类环境配置至关麻烦。
2. 前端的html代码依托于服务端，致使前端作工程化时，很难对接先后端项目。

也就是说，咱们须要作一个非单页应用的工程化项目。这个项目在线上时是先后端耦合的，可是在开发时，咱们又不想先后端耦合。再整理一下，咱们须要解决的问题有：

1. 先后端分离，前端开发不能依赖于后端环境。
2. 前端工程化。诸如静态资源的打包编译、依赖的管理、组件化等等。

明确了要解决的问题后，咱们就能够开始了。咱们能够用webpack搭建一个项目，帮咱们作一些打包、编译、文件处理这些工程化工做。webpack从零配置比较繁琐，咱们能够选择修改一个轮子，好比把vue-cli的webpack模板改造一下，删了不必的vue-loader，给它增长一下多页面入口就行了。

修改轮子

第一步：理解 vuejs-templates/webpack

npm install -g vue-cli

vue init webpack my-project复制代码

既然要改人家的模板，先得理解人家都作了什么。这里就不带你们读代码了，根据package.json的命令一个个文件的代码看过去就知道了，很直接很暴力。

第二步：删

既然咱们不须要用vue，那么对于vue文件处理的相关逻辑咱们就不须要了。根据刚刚对这个模板的了解，咱们知道vue-loader跟vue-style-loader是不须要的。因此删除对应的代码跟package.json里面的包就行了。

多提一点的是，vue-style-loader虽然不须要，style-loader仍是须要的，因此须要用后者替换前者。

第三步：加

作减法容易，作加法就没这么轻松了。根据咱们刚刚的需求，咱们应该给它加个多页面入口。网上有很是多的webpack多入口配置教程。然而他们不必定就能知足咱们的需求。他们广泛存在以下问题：

1. 入口文件须要本身配置。在一个页面较多的项目中，入口文件应当从约定的目录中自动读取，也更符合约定优于配置。
2. 多入口是针对js的。因为业界广泛是在用单页应用，页面由js生成，故多页面只要多个js入口就好，不须要直接写html。而个人需求不是，我但愿的多入口是针对html文件而言的。

不过当咱们解决了上述两个问题后，咱们还会有一个新的问题。咱们不一样的html文件，其实又是有公共的部分的。好比都有 header，footer。也就是说，咱们须要给这些html文件增长一个模板。咱们能够经过webpack的loader来实现，可是没有现成的loader能够比较好的解决。那怎么办呢？能够参考我另一篇文章。编写本身的Webpack Loader。

静态资源的版本控制

上述问题解决后，咱们的工做并未完成。如今这个项目的静态资源是以文件哈希值来控制的。惋惜有的项目的静态资源是要后端来更新时间戳控制的。虽然这不是个好方案，但有些工程却依旧是这样。没办法，为了适应他们，咱们必须得去掉哈希值。但是这样的话，当咱们想更新css内引用的图片时又没辙了，由于css内链的图片后端无法控制版本。

这个该怎么解决呢？感谢webpack，咱们能够经过以下的配置来实现：

{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  oneOf: [
    {
      issuer: /\.html$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[ext]',)
      }
    },
    {
      issuer: /\.(css|less)$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    }
  ]
}复制代码

意思就是若是图片是在html中引用的则不加哈希值，在css文件中引入的则加上。

完工

这样咱们就完成了一个简单的项目架构。它能帮助咱们实现文件的打包、编译，html的模板控制等功能。最终能build出一份html+静态资源的web页面直接发布cdn。固然也能够把它们直接扔给后端。

不过这个架子还不是很是的完善，应用场景也有限，比较适用于一些交互较少、页面较多、看重seo或者传统后端套页面的网站。另外，做为工程化中很是重要的组件化与测试，因为没有任何框架的引入，这点也须要使用者本身再去摸索。

另外，若是仍是想用vue，react或angular，又不想搞他们的服务端渲染，能够尝试下变相的服务端渲染系统。

最后，若是这个架子对您有用，欢迎戳开github。

--阅读原文 --转载请先通过本人受权-丁香园F2E @相学长。