manifest-revision-webpack-plugin, 写出一个清单文件,包含你的版本化 web pack块和资产

分享于 

8分钟阅读

GitHub

  繁體 雙語
Write out a manifest file containing your versioned webpack chunks and assets.
  • 源代码名称:manifest-revision-webpack-plugin
  • 源代码网址:http://www.github.com/nickjj/manifest-revision-webpack-plugin
  • manifest-revision-webpack-plugin源代码文档
  • manifest-revision-webpack-plugin源代码下载
  • Git URL:
    git://www.github.com/nickjj/manifest-revision-webpack-plugin.git
    Git Clone代码到本地:
    git clone http://www.github.com/nickjj/manifest-revision-webpack-plugin
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/nickjj/manifest-revision-webpack-plugin
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    Build Status

    web service的清单修订插件

    如果你可以提供目录路径,安装插件,现在奇怪的所有资产都自动自动标记。

    这个插件就是这么做的。 例如下面是输出的清单文件:

    {
     "publicPath": "http://localhost:2992/assets/",
     "assets": {
     "images/hamburger.svg": "images/hamburger.d2cb0dda3e8313b990e8dcf5e25d2d0f.svg",
     "images/spinner.gif": "images/spinner.37348967baeae34bfa408c1f16794db1.gif",
     "images/touch/apple-touch-icon.png": "images/touch/apple-touch-icon.7326f54bfe6776293f08b34c3a5fde7b.png",
     "images/touch/chrome-touch-icon-192x192.png": "images/touch/chrome-touch-icon-192x192.571f134f59f14a6d298ddd66c015b293.png",
     "images/touch/icon-128x128.png": "images/touch/icon-128x128.7c46d686765c49b813ac5eb34fabf712.png",
     "images/touch/ms-touch-icon-144x144-precomposed.png": "images/touch/ms-touch-icon-144x144-precomposed.452d90b250d6f41a0c8f9db729113ffd.png",
     "images/credit-cards/american-express.png": "images/credit-cards/american-express.8a5ade08365dcc7e5fa39a946bb76ab8.png",
     "images/credit-cards/diners-club.png": "images/credit-cards/diners-club.03afaaa2d75264e332dc28309b7410b9.png",
     "images/credit-cards/discover.png": "images/credit-cards/discover.f89468f36ba1a9080b3bb05b9587d470.png",
     "images/credit-cards/jcb.png": "images/credit-cards/jcb.58f43e5f1fb8c6a4e7e76a17e7824e29.png",
     "images/credit-cards/mastercard.png": "images/credit-cards/mastercard.373e4f1ac72b50605183e8216edde845.png",
     "images/credit-cards/visa.png": "images/credit-cards/visa.26bcf191ee12e711aa540ba8d0c901b7.png",
     "app_js.js": "app_js.5018c3226e10bf313701.js",
     "app_css.css": "app_css.291431bdd7415f9ff51d.css" }
    }
    自定义输出格式

    如果可以轻松格式化上述文件的输出,以便它能与现有框架( 如 Ruby on Rails ) 一起工作? 当然没有问题。

    如果你想要一个未包含的自定义输出格式,该怎么办? 同样,没有问题。只要传递一个函数作为格式选项,它就会被使用。 下面的API部分将更详细地解释这一点。

    这里包含了
    • 资产包括用于在服务器上轻松查找的逻辑路径
    • 你只需要在 1处跟踪你的资产服务器( web pack配置)
    • 它尽可能小,提供足够的信息来做它想要做的事情
    • 支持多种输出格式

    安装

    npm install --save manifest-revision-webpack-plugin

    快速启动

    var ManifestRevisionPlugin =require('manifest-revision-webpack-plugin');// Where are your assets located in your project? This would typically be a path// that contains folders such as: images, stylesheets and javascript.var rootAssetPath ='./src/client';module.exports= {
     module: {
     loaders: [
     {
     test:/.(jpe?g|png|gif|svg)$/i,
     loaders: [
     'file?context='+ rootAssetPath +'&name=[path][name].[hash].[ext]' ]
     }
     ]
     },
     plugins: [
     newManifestRevisionPlugin(path.join('build', 'manifest.json'), {
     rootAssetPath: rootAssetPath,
     ignorePaths: ['/stylesheets', '/javascript']
     })
     ]
    };

    API

    • rootAssetPath 定义了在哪里开始寻找资产。
    • ignorePaths 是要忽略的路径的array。 路径可以是字符串或者正则表达式。
    • extensionsRegex 是你总是希望包含的资源的一个正则表达式。 示例:/.(jpe?g|png|gif|svg)$/i
    • format 允许你选择清单输出文件格式。
      • 当前支持 general ( 默认值),rails 或者传递函数。

    如果要使用自定义函数,它可能会如下所示:

    // It must take 2 arguments. The first argument is the raw stats provided by// Webpack. The second argument is an object list of each asset.varmyCoolFormatter=function (data, parsedAssets) {
     console.log(data);
     console.log('---');
     console.log(parsedAssets);
     // In this case we're returning an empty result.return {};
     };
     newManifestRevisionPlugin(path.join('build', 'manifest.json'), {
     rootAssetPath: rootAssetPath,
     ignorePaths: ['/stylesheets', '/javascript'],
     format: myCoolFormatter,
     })

    是在流行框架中使用的自定义格式化程序

    很好,我很乐意把它包含在这个项目中。 只需发送请求请求。 以下是提交正式格式化程序的规则:

    • 它必须有一个 单元测试
    • 它必须有良好的文档化( 遵循其他格式化程序示例)

    最后,你将修改以下文件:

    如何使用清单文件?

    它可以与任何服务器和任何编程语言一起使用。 你可以做的是在你的应用程序启动时一次读取 manifest.json 文件。 然后创建一个模板 helper,它接受一个资产并在场景后面查找资产并返回真实的文件名。

    :服务器上的外观是什么

    假设你正在使用jinja模板引擎。 你还创建了一个名为 asset_for的helper。

    在模板中调用你的模板 helper:
    <imgsrc="{{ asset_for('images/hamburger.svg') }}"alt="Hamburger">
    它将生成源代码:
    <imgsrc="images/hamburger.d2cb0dda3e8313b990e8dcf5e25d2d0f.svg"alt="Hamburger">

    这个外观的实现是什么?

    web框架太多,不能包含示例。 在人们使用这个项目的时候,创建wiki页面是很好的,因为在流行的网页框架中如何实现它的例子已经结束。

    • 这个插件使用这个插件插件
      • 包含一个博客文章和演示视频,解释如何设置

    贡献者


    WEB  文件  MAN  版本  asset  WEBP  
    相关文章