resources-webpack-plugin
为了最大利用缓存，编译后的文件使用 md5 进行命名，这时候就会引发两个问题：
- 页面如何正确引用当前版本
- 历史版本如何进行清理
resources-webpack-plugin 做的事情便是在 webpack 编译完成后输出文件索引表，以便进行文件管理。
- latest-resources.json 最新版本描述配置文件，供其他程序来引用编译后资源地址
- resources.json 历史版本文件映射表，供清理过期文件时使用
安装
npm install --save-dev resources-webpack-plugin示例
webpack.config.js
'use strict';
var path = require('path');
var webpack = require('webpack');
var WebpackResourcesPlugin = require('resources-webpack-plugin');
var version = require('child_process').execSync('git log --pretty=format:"%h" -1').toString();
var webpackResourcesPlugin = new WebpackResourcesPlugin(version);
module.exports = {
entry: {
'index': './js/index.js',
'test': './js/test.js'
},
output: {
path: './dist',
filename: '[name].[chunkhash].js'
},
plugins: [webpackResourcesPlugin],
devtool: 'source-map',
module: {
loaders: [{
test: /\.(jpe?g|svg|png)$/,
loader: 'url-loader?limit=10000'
}]
}
};参数
new WebpackResourcesPlugin(version, callback)
version
为了将编译后的代码与源码关联起来，version 通常使用 git commit 或读取 package.json 的 version 作为编译版本号
callback
版本创建完成的回调函数。第一个参数接收 errors
输出
latest-resources.json 格式示例：
{
"modified": "2016-09-16T16:36:03.175Z",
"version": "477efab",
"modules": {
"index": "index.6b3d5ef7ddafe0687b11.js",
"test": "test.e03b98bcc728d3d3cd3a.js"
},
"assets": [
"80fa4bcab0351fdccb69c66fb55dcd00.png",
"index.6b3d5ef7ddafe0687b11.js",
"test.e03b98bcc728d3d3cd3a.js",
"index.6b3d5ef7ddafe0687b11.css",
"index.6b3d5ef7ddafe0687b11.js.map",
"index.6b3d5ef7ddafe0687b11.css.map",
"test.e03b98bcc728d3d3cd3a.js.map"
]
}