摘要：也就是说，我们需要做一个非单页应用的工程化项目。现在这个项目的静态资源是以文件哈希值来控制的。这个该怎么解决呢感谢，我们可以通过如下的配置来实现意思就是如果图片是在中引用的则不加哈希值，在文件中引入的则加上。
最近金拱门比较火，我们先戳开它的官网看看。
看完后，如果你老板要是让你做这么一个网站，一定要seo，一定要兼容IE，你会怎么去做呢？
用vue/react吧，单页应用满足不了seo，而且IE兼容性不好。上node中间层做服务端渲染又把事情搞麻烦了。只能用JQuery干，但是又该怎么做工程化呢？好像也不是很容易。因为目前大家的工程化方案多是一整套单页应用全家桶，如vue-cli的webpack模板。
而前端到如今这个阶段，再让大家接手一个没有工程化的项目，肯定内心非常抵触了。试想这么一个项目，手动link资源，不能写less/sass，不能写ES6，不能依赖管理，不能编译打包...，哦天，想都不敢想。可是工程化这事在实际业务中却没有大家想象中的那么顺利。比如刚刚金拱门的官网，页面很多，要求满足SEO，IE兼容。而且遇到这些项目，往往还会有这些问题：
由于页面是后端渲染，需要部署后端程序（php,java之类），各种环境配置相当麻烦。
前端的html代码依托于服务端，导致前端做工程化时，很难对接前后端项目。
也就是说，我们需要做一个非单页应用的工程化项目。这个项目在线上时是前后端耦合的，但是在开发时，我们又不想前后端耦合。再整理一下，我们需要解决的问题有：
前后端分离，前端开发不能依赖于后端环境。
前端工程化。诸如静态资源的打包编译、依赖的管理、组件化等等。
明确了要解决的问题后，我们就可以开始了。我们可以用webpack搭建一个项目，帮我们做一些打包、编译、文件处理这些工程化工作。webpack从零配置比较繁琐，我们可以选择修改一个轮子，比如把vue-cli的webpack模板改造一下，删了没必要的vue-loader，给它增加一下多页面入口就好了。
修改轮子 第一步：理解 vuejs-templates/webpacknpm 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多入口配置教程。然而他们不一定就能满足我们的需求。他们普遍存在如下问题：
入口文件需要自己配置。在一个页面较多的项目中，入口文件应当从约定的目录中自动读取，也更符合约定优于配置。
多入口是针对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 @相学长。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/89360.html
摘要：作者众成翻译只写的禅众成翻译如何使更高效如何用构建前端架构小米直达服务介绍与开发实战搭建一个多页面的无依赖的工程化项目掘金计算机网络概念和结构掘金英文 2017-10-29 前端日报 精选 【译】图与例解读Async/AwaitVue + TypeScript 新项目起手式 React-Router动态路由设计最佳实践Vue2 原理浅谈使用合适的设计模式一步步优化前端代码The 14 ...
摘要：总结我觉得，以后基于的全栈式开发的模式将会越来越流行，这也会引领前端步入工程化时代。欢迎继续关注本博的更新中间层实践一基于的全栈式开发中间层实践二搭建项目框架中间层实践三配置中间层实践四模板引擎中间层实践五中间层的逻辑处理 版权声明：更多文章请访问我的个人站Keyon Y，转载请注明出处。 前言 近期公司有个新项目，由于后端人手不足，我果断的提议用node中间层的方案，得到了老大的支持...
摘要：概述我非常认同前百度数据工程师现神策分析创始人桑老师最近谈到的数据分析三重境界统计计数多维分析机器学习数据分析的统计计数和多维分析，我们通常称之为数据探索式分析，这个步骤旨在了解数据的特性，有助于我们进一步挖掘数据的价值。 showImg(https://camo.githubusercontent.com/f98421e503a81176b003ddd310d97e1e1214625...
摘要：毕竟实现一个业务需求，是一种技术，而通过写作，分享，讨论等，能得到的就是一种技能了。我决定采用目前市场上的三大框架之一来进行项目演示，刚刚结束分享，这里把我分享的过程给大家分享一下。所以如题，请选择原谅我啊。 why？ 身为技术人员有没有必要在自己学习与开发的过程中做技术分享（很尴尬，技术明明才差不多一年），这几乎是一件很明显的事情了，写文章，开博客，搞分享会，几乎任何一种线上线下交流...
摘要：继承作用就是避免配置重复，对于子项目来说应该关心父项目是怎么样配置的。聚合字面理解就是聚在一起合作完成工作，就是将子模块聚集起来完成相应的项目需求父工程的搭建项目结构在父工程中，主要负责完成依赖的版本管理，并不是实际的依赖。 从大二开始就一直关注segmentFault,在问题专区帮忙回答一些自己知晓的问题；在写这篇文章之前我一直会在朋友圈发一些自己遇到的问题以及解决办法，这是第一次写...
阅读 1313·2021-10-11 10:59
阅读 1560·2021-09-09 11:36
阅读 1091·2019-08-30 15:55
阅读 1206·2019-08-29 11:20
阅读 2957·2019-08-26 13:39
阅读 1366·2019-08-26 13:37
阅读 1831·2019-08-26 12:11
阅读 1201·2019-08-23 14:28
