webpack编译静态多页面应用

2018-01-13 10:59:40来源:https://yuerblog.cc/2018/01/12/webpack-multiple-static-page-作者:鱼儿的博客人点击

分享


在很久之前,整理过一套webpack2+react的脚手架,主要是为了写单页应用而准备的,地址:https://github.com/owenliang/react-webpack2


最近在公司搬砖,主要是用PHP来做PC和WAP站,会和前端FE同学进行交互。在工作模式上,FE同学会提供一个静态页给PHP,然后PHP同学将数据填充到静态页中,渲染后吐给客户端。


可以这么说,如果你需要做SEO,那么服务端渲染是必然的选择。通过观察FE的静态页,我发现他们是用webpack编译的,所以引发了我动手的一个冲动,决定自己配置一个编译静态多页应用的webpack脚手架出来,地址:



https://github.com/owenliang/webpack-static-html


编译单页和静态多页应用的差别

单页应用一般是基于JSX实现的,JS生成HTML,而webpack本身的实现原理也是基于JS进行依赖分析编译的,两者结合的特别好。


多页应用也可以在每个页面分别使用JSX,其实和单页应用没有太大差别,仍旧是JS为王。而我要说的并不是单纯的多页应用,而是静态多页,也就是通过.html文件编写HTML结构,利用JS实现动态交互。


刚开始的时候我也不太适应,因为以前都是webpack+react,写的都是JS(JSX),一切都是JS组件,包括图片,样式,互相引用即可。而静态HTML页面,都是写在.html中的,只有JS动态逻辑需要webpack编译,这是一个主要差别。


解决思路

既然页面是.html中编写的静态内容,那么webpack要做的就是把js和css进行编译,最后帮我们把编译后的css和js引入到静态页中。


这个过程可以总结为:webpack编译js,js引入css,当这些编译完成后,把静态页当做模板文件,将编译好的js和css插入其中。


而传统我们编写静态页面,一般是直接在静态页顶部引入若干js文件和css文件,如果希望编译这些文件(比如压缩、合并css/js),需要我们额外的写一些预处理工具,而这些正是webpack擅长的。


实践关键

webpack的编译入口是js文件,所以每个页面需要一个独立的js入口,在每个页面的js入口文件中,我们应该引入依赖的css文件,这样webpack就会顺藤摸瓜进行相关css依赖的提取分析。


不太习惯的是,一旦你决定使用webpack来实现前端工程化,你必须把每个js文件当做一个node module,遵循node模块化编程来进行js之间的互相调用。这样做的好处显而易见,我们可以把不同功能的函数写到不同的js文件中,然后互相引用即可,webpack会帮我们顺藤摸瓜的提取所有引入的js进行文件合并,一切都是背地里完成的。


如果你做过单页应用,也许习惯引入css并直接插入到jsx中,并且可能配置了css的模块化编译(每个css文件是一个模块,它内部的class、id等都会哈希唯一化)。在静态多页中,我们并不会用到jsx,所以css文件只是单纯的引入进来,从而告知webpack本页面需要用到这些css样式,请编译时帮我引入。


另外一个差别是图片,单页应用我们一般直接引入图片并和jsx混写,这样webpack就能分析出我们对图片的依赖,并对依赖图片进行编译。而现在我们的html静态页面是无法被webpack分析的,所以在html静态页面中引入本地图片路径,webpack是不会知道的,最后发布的静态页中引用的仍旧是一个本地磁盘路径,显然不行。


解决这个问题,需要用到html-loader这个插件,所有*-loader命名的插件,都是用来帮助我们以import/require形式导入模块用的,比如html-loader是用来支持我们import/require一个.html文件当做模块。当然,在js入口里引入一个html模块没有任何意义,但是html-loader插件却可以在引入.html的时候去分析html静态页里的<img>标签,提取其中引入的本地磁盘文件,将这些图片转化为图片模块,交给webpack进一步编译提取,最终在编译产物中会在.html中替换掉原先的磁盘路径,改为编译产出后的URL路径。


观察


理论结合实践,现在打开项目:https://github.com/owenliang/webpack-static-html
,仔细观察webpack配置,以及项目的目录结构。


src目录是开发阶段的工程,通过执行npm run release后会编译项目到dist目录。


整个站点由index和about两个页面组成,公共引用的css、js都被提取到了common文件中,并且每个文件都hash编码,这就是一般传统PC/WAP站点需要的样子。


最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台