resources-webpack-plugin

为了最大利用缓存，编译后的文件使用 md5 进行命名，这时候就会引发两个问题：

1. 页面如何正确引用当前版本
2. 历史版本如何进行清理

resources-webpack-plugin 做的事情便是在 webpack 编译完成后输出文件索引表，以便进行文件管理。

1. latest-resources.json 最新版本描述配置文件，供其他程序来引用编译后资源地址
2. 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"
  ]
}