文档章节

webpack加入版本号打包

曾建凯
 曾建凯
发布于 2016/05/19 15:59
字数 700
阅读 7527
收藏 3

还是回到那个老项目重构的问题。

更新了脚本以后,偶尔其他团队成员说,哦,某某js无效了。

调试了一圈,发现原来少写了判断,build,原来的合并的js文件就更新,虽说这样一直发布也没什么问题,但是还是希望每个版本,能有一个记录。

不为别的,这次是版本x的出错了,也许下一次是版本x是正确的,但是更新x+1的时候,就发现出错了。在进行错误处理的时候,起码你能够让网站先使用之前正确的版本,再给你自己足够的时间去调整。

除此之外,github、git@osc,都有一个release的功能,就是当你自己写的npm或者bower发布以后,有一个所谓的release版本号,之前一直都是用gulp在弄这个东西,现在换了webpack,如何release,就是个问题。

解决这些问题,也很简单,额外装个插件就可以解决了,为了便于调试release版本,我们还额外加了一个插件:

npm install copy-webpack-plugin html-webpack-plugin --save-dev

改一改build的配置文件:

const ExtractTextPlugin = require('extract-text-webpack-plugin');
// 要加两个插件
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const packageInfo = require('./package.json');

const outputPath = __dirname + '/output/' + packageInfo.version;
const releasePath = __dirname + '/output/release/';

module.exports = {
	entry: [
		"./main.js"
	],
	output: {
		path: outputPath, // 输出到版本号目录
		filename: 'app.js'
	},
	module: {
		loaders: [
			{
				test: /\.(es6|jsx)?$/,
				exclude: /(node_modules|bower_components)/,
				loader: 'babel',
				query: {
					presets: ['es2015', 'react'],
					plugins: [
						"transform-es2015-block-scoping",
						"transform-class-properties",
						"transform-es2015-computed-properties"
					]
				}
			},
			{
				test: /\.(png|jpg|jpeg|gif|woff|woff2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
				loader: 'url-loader?limit=1000'
			},
			{
				test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
				loader: 'file'
			},
			{
				test: /\.styl$/,
				// loader: "style!css!stylus"
				loader: ExtractTextPlugin.extract('style', 'css!stylus')
			},
			{
				test: /\.css$/,
				// loader: "style!css"
				loader: ExtractTextPlugin.extract('style', 'css')
			}
		]
	},
	plugins: [
		new ExtractTextPlugin('app.css'),
		new HtmlWebpackPlugin({
			title: 'Webpack Tutorial - ver ' + packageInfo.version
		}),
		new CopyWebpackPlugin([
			// 打包出release
			{
				from: outputPath,
				to: releasePath,
				toType: 'dir'
			}
		])
	]
};

首先我假定版本号是从package.json文件获取,得到版本号以后,输出的目录就以output/version输出,最终输出完以后,将output/version复制到output/release的目录下。

并且我们还加入了HtmlWebpackPlugin的插件,他会自动根据你配置的config,获取到相关的输出点,并根据这个输出点,生成一个html文件。

这样打包完毕,我们直接访问output/version,就能看到加载测试结果了。

实际上这个问题我是要解决前端任意版本完整的单元测试状态,output不一定需要push上版本仓库,我只要通过拿到git的版本tag,然后build就可以跑任意版本的测试了,而且也不会覆盖掉现有的release。

copy-webpack-plugin说明

html-webpack-plugin说明

相关的代码已经提交到webpack-tutorial上了。

补充:发现一个bug,就是copy-webpack-plugin一定要手动创建了目录才行,不然第一次没法拷贝文件。

© 著作权归作者所有

曾建凯

曾建凯

粉丝 335
博文 66
码字总数 104794
作品 0
广州
技术主管
私信 提问
用TypeScript编写发布函数库

作者简介 翎刀 蚂蚁金服数据前端 为什么使用TypeScript编写函数库 TypeScript作为一种有类型定义的JavaScript超集语言,用来写函数库除了给自己开发者自己带来如开发效率提升、静态检查等好处...

蚂蚁金服ProtoTeam
2017/11/09
0
0
8102年底如何开发和维护一个npm项目

开发流程 初始化 首先在npm官网进行注册登录 运行,可以通过命令行进行一些初始化的设置,如果想快速进行设置,可以运行,会在项目的根目录生成一个package.json的文件,具体包含哪些配置可以...

supot
2018/11/01
0
0
webpack学习简单总结

webpack使用总结: 入门使用: 这个报错说明需要安装相应的Loader,并在引用时指定相应的loader 执行成功如图: chunk指相应的区块。 要是css引入正确:必须引入css-loader,要使改变的css生效...

蓓蕾心晴
2017/06/27
0
0
使用webpack4打造自己的前端工作流

前言 webpack4发布已经有一段时间了,我在实践的过程中发现,很多项目配置在webpack3下工作正常,但是升级到webpack4直接就崩了,如果想要webpack4正常工作,很多插件也需要升级到新版。下面...

wmui
2018/08/24
0
0
Webpack v2.2.0 发布,模块加载打包工具

Webpack v2.2.0 正式版发布了。本次发布的版本与最后发布的 RC 版相比,没有任何更改,只是更新了版本号。 2.2.0-rc.7更新内容: Bug 修复: fix watch flag in config with multiple confi...

局长
2017/01/18
3.5K
7

没有更多内容

加载失败,请刷新页面

加载更多

oracle ORA-39700: database must be opened with UPGRADE option

ORA-01092: ORACLE instance terminated. Disconnection forced ORA-00704: bootstrap process failure ORA-39700: database must be opened with UPGRADE option 进程 ID: 3650 会话 ID: 29......

Tank_shu
今天
1
0
分布式协调服务zookeeper

ps.本文为《从Paxos到Zookeeper 分布式一致性原理与实践》笔记之一 ZooKeeper ZooKeeper曾是Apache Hadoop的一个子项目,是一个典型的分布式数据一致性的解决方案,分布式应用程序可以基于它...

ls_cherish
今天
4
0
聊聊DubboDefaultPropertiesEnvironmentPostProcessor

序 本文主要研究一下DubboDefaultPropertiesEnvironmentPostProcessor DubboDefaultPropertiesEnvironmentPostProcessor dubbo-spring-boot-project-2.7.3/dubbo-spring-boot-compatible/au......

go4it
昨天
1
0
redis 学习2

网站 启动 服务端 启动redis 服务端 在redis 安装目录下 src 里面 ./redis-server & 可以指定 配置文件或者端口 客户端 在 redis 的安装目录里面的 src 里面 ./redis-cli 可以指定 指定 连接...

之渊
昨天
2
0
Spring boot 静态资源访问

0. 两个配置 spring.mvc.static-path-patternspring.resources.static-locations 1. application中需要先行的两个配置项 1.1 spring.mvc.static-path-pattern 这个配置项是告诉springboo......

moon888
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部