进阶:构建具备版本管理能力的项目-阿里云开发者社区

开发者社区> 青衫无名> 正文

进阶:构建具备版本管理能力的项目

简介: webpack是时下十分流行的编译和打包工具,它提供一种可扩展的loader的方式,简单的配置,便可以编译打包各类型的文件,包括js、css、image、font、html,以及各种预编译语言都不在话下。
+关注继续查看

webpack是时下十分流行的编译和打包工具,它提供一种可扩展的loader的方式,简单的配置,便可以编译打包各类型的文件,包括js、css、image、font、html,以及各种预编译语言都不在话下。

一、回顾与思考

在上一节的【入门:十分钟自动化构建】中我们讲解了如何用gulp去搭建一个工作流。我们认识到gulp是一个流程管理工具,以单个任务为基础单元,组合成为一套完整的工作流,而且gulp还有很多的以gulp-*格式命名的工作模块,用来处理各种资源文件,如果没有看过上一节内容的同学,建议先回去看过,再往下阅读,因为本节内容是跟上一节的知识点紧密联系的。

这一节我们会讲解如何构建具备版本管理能力的项目,什么是版本管理能力?不是什么svn或者branch,我们看这样一个场景来帮助理解:

你用上次搭建的工作流开发了一个网站,然后上线。

第二天打开发现有bug,心想尼玛赶紧趁着老板没发现修复一下。

改完代码,打包,发布,一气呵成,完美。

然而十分钟以后老板让你去一趟办公室,打开页面跟你说有个bug。心里一抽,一看!我勒个去,这坑爹的缓存啊。。。

怎么去解决这个缓存?,或者说,怎么保证我上线一个新版本,可以完完全全地替代旧版本?这就是版本管理。

这问题有很多解决方法,包括手动打个戳啊什么的,像src="a.jpg?201608062315",这确实可以解决,但是如果一次更新的东西很多,你压根改不过来。

gulp能帮我们做这事吗?可以,麻烦,有兴趣的同学可以自行搜索资料。有没有简单点的套路?有的,webpack天然支持这一功能。接下来我们就介绍如何用webpack来搭建这么一套工作流。

二、webpack

webpack的用法,我们简单介绍一下。跟gulp一样,webpack也是写好配置文件才能开始工作。

全局安装webpack

npm install webpack -g

记得养成好习惯,也本地安装一下哦

npm install webpack --save-dev

顺带我们把接下来要用到的几个loader一起安装了:

npm install style-loader css-loader sass-loader swig-loader --save-dev

这里的*-loader作用跟gulp-*差不多,就是一些编译用的模块。

紧接着我们在根目录下,新建一个webpack.config.js配置文件,我们直接来看代码:

var path = require('path')

module.exports = {
 entry: {
 Index: ['./src/js/index.js']
 },
 output: {
 path: path.resolve(__dirname, './dist/static'),
 publicPath: 'static/',
 filename: '[name].js'
 },
 resolve: {
 extensions: ['', '.js', '.scss', '.swig']
 },
 module: {
 loaders: [
 {
 test: /\.css$/,
 loader: 'style!css'
 },
 {
 test: /\.scss$/,
 loader: 'style!css!sass'
 },
 {
 test: /\.swig$/,
 loader: 'swig'
 }
 ]
 }
}

这里大致分为四部分的内容:
entry
入口文件,也就是一切工作的起点,你可以将整个web应用都最终打包成一个js文件,那你只需要定义一个入口,而如果你希望对多个页面独立开来,你需要定义多个入口,最终在不同的页面引用不同的js。一个entry对应生成一个bundle。

output
定义打包输出的配置:

  • path是打包文件的存放路径,按上面的配置,意味着我们待会打包的文件是要放在dist/static下的;
  • publicPath是定义文件被打包后的url前缀的,效果是


原文发布时间:2016-08-16

原文作者:Jack_Lo

本文来源掘金如需转载请紧急联系作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
linux根文件系统制作之busybox编译和系统构建【转】
转自:http://blog.chinaunix.net/uid-29401328-id-5019660.html 介绍完相关文件后我们开始构建文件系统,涉及到的文件等到具体用到的时候再讲。一、编译busybox首先下载busybox源码,编译busybox,得到一些初始化文件及我们需要的各种命令。
1213 0
从0到1,云服务助力全民直播快速构建大数据平台
随着业务的快速发展,全民直播如何应对来自技术与运营方面的挑战?6月7日,在上海世博中心,2018云栖大会·上海峰会阿里云支持与服务专场上,全民直播大数据架构师朱益发表主题演讲,详细介绍了从0到1,云服务助力全民直播快速构建大数据平台的过程。
1849 0
git 本地项目推送到远程仓库(或者仓库分支)Window版-01
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qingfeng812/article/details/51382521 ...
1082 0
SpringBoot2.0 整合 Swagger2 ,构建接口管理界面
一、Swagger2简介 1、Swagger2优点 整合到Spring Boot中,构建强大RESTful API文档。省去接口文档管理工作,修改代码,自动更新,Swagger2也提供了强大的页面测试功能来调试RESTful API。
2361 0
(八):构建WineLib DLL
版权声明:您好,转载请留下本人博客的地址,谢谢 https://blog.csdn.net/hongbochen1223/article/details/50704597 (一):介绍 出于某些原因,你可能会发现你想要和使用Windows DLL一样使用你的Linux库.
1101 0
匿名内部类方式构建对象导致序列化失败
###问题描述: 以下代码为问题代码: ``` public class ItemDO implements Serializable { private static final long serialVersionUID=-463144769925355007L; ... private Map langAndTitleMap; ...
1753 0
怎样构建一个微服务项目? | 带你读《Spring Cloud Alibaba(2019)》之六
本节重点构建了一个微服务项目(会员服务、订单服务)。
7764 0
+关注
3598
文章
840
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载