webpack加入版本号打包

2019独角兽企业重金招聘Python工程师标准>>>

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

更新了脚本以后，偶尔其他团队成员说，哦，某某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一定要手动创建了目录才行，不然第一次没法拷贝文件。

转载于:https://my.oschina.net/janpoem/blog/678021