你的位置:首页 > 软件开发 > Java > 基于webpack的前端工程化开发解决方案探索(一):动态生成HTML

基于webpack的前端工程化开发解决方案探索(一):动态生成HTML

发布时间:2015-12-03 16:00:28
Hello,大家好!在前面三章中我们与大家分享如何使用webpack来完成前端的模块化打包工作,并附带了一些简单的案例实现,算是webpack的一个入门吧。从这一章开始,我们将陆续为大家介绍如何使用webpack来完成前端工程化开发。   1.什么是工程化开发  软件工程的工 ...

基于webpack的前端工程化开发解决方案探索(一):动态生成HTML

  Hello,大家好!在前面三章中我们与大家分享如何使用webpack来完成前端的模块化打包工作,并附带了一些简单的案例实现,算是webpack的一个入门吧。

从这一章开始,我们将陆续为大家介绍如何使用webpack来完成前端工程化开发。

 

  1.什么是工程化开发

  软件工程的工程化开发概念由来已久,但对于前端开发来说,我们没有像VS或者eclipse这样量身打造的IDE,因为在大多数人眼中,前端代码无需编译,因此只要一个浏览器来运行调试就行了。但是时至今日,互联**别是移动互联网为前端开发带来了更大的机会,同时前端代码也变得越来越复杂,越来越难以管理,因此前端工程化开发的工作可以说是刻不容缓。

  那么前端工程化开发到底需要解决哪些前端工程师们火烧眉毛的问题呢?个人认为至少包含以下几点:

  1. 专业的IDE支持,完成包括项目初始化,语法提示,项目编译,打包等工作。

  2. 良好的模块化代码管理结构,模块化可以使我们编写的组件或者代码达到高度复用,降低代码间的耦合性;同时可以良好的与第三方组件兼容。

  3. 简单易配置的前端测试环境,完成组件的单元测试,页面的集成测试;同时提供良好的DEBUG环境,可以很好的定位错误的所在以及错误的详细信息。

  4. 静态资源(图片/字体/CSS/JS等)的良好管理方案,一是静态的文件版本问题,二是对于小图标自动转BASE64,减少HTTP请求

  5. 完整的代码版本管理,打包,发布,多环境部署,测试反馈等运维支持

  

  当然,以上只是个人意见。每个公司、每个项目的情况不一样,所需要的条件都会有所不同。

  以上这些需求,在以前基本上都是不敢想象的,这些工具都需要访问文件系统或者网络,很少有比较完整的解决方案。(好了,早期也有类似于Ant这样的Java解决方法,对前端开发人员要求过高而且不是很好用)好在,伟大的NodeJs诞生了,于是乎,基于NodeJs出现了很多优秀框架,像Grunt和 Gulp等。

  好了,今天的主题是webpack!让我们来看下webpack作为后起之秀,是如何对前端工程化进行支持的!

  

   2. 动态生成HTML

  大家注意,这里所说的动态生成HTML,是指我们使用webpack来动态产生我们最终所期望的HTML文件,而不是指在浏览器运行时使用JS生成HTML片段。

  那为什么要动态生成HTML,我自己写不行吗?答案当然是可以的。

  之所以要动态生成,主要是希望webpack在完成前端资源打包以后,自动将打包后的资源路径和版本号写入HTML中,达到自动化的效果。

  大家可以回想一下我们之前的三篇文章中介绍的案例,在那个练手的项目中,我们页面上的script标签是我们自己写的,那么如果我们需要给JS添加上版本号的话,岂不是每次都的去修改?还有CSS,都是内嵌在JS中的,待JS加载后再创建style标签,然后写入css内容。这么做的话,浏览器需要先等待JS加载完成后,才能生成CSS样式,页面上会有一个等待过程,这个过程页面是完全没有样式的。这当然不是我们所想要的。

  我们的目标是:webpack根据指定的模板,插入打包编译后CSS文件路径;插入打包生成的JS的文件路径。并且还需要为二者添加版本号。另外,我们还可以同时将HTML进行压缩,进一步减少文件大小。

  

  3.初始化项目、安装依赖

  我们这里默认大家的开发环境已经安装了npm以及webpack,尚未安装的同学可以自行安装。

  A.新建一个空项目,然后通过   npm  init     对项目进行初始化,按照提示输入项目的基本信息,然后生成package.json文件。这个文件里面会保存我们即将安装的一些npm插件信息,便于二次移植开发。

  B.安装项目所需依赖:

    npm install css-loader jquery@1 style-loader html-webpack-plugin --save-dev 

原标题:基于webpack的前端工程化开发解决方案探索(一):动态生成HTML

关键词:HTML

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。