assets-webpack-plugin

[Christian-Yang]

https://github.com/kossnocorp/assets-webpack-plugin

assets-webpack-plugin

Webpack plugin that emits a json file with assets paths. assets-webpack-plugin 这个webpack插件产生一个json文件，这个文件内容是资产的路径集。

Why Is This Useful?

When working with Webpack you might want to generate your bundles with a generated hash in them (for cache busting). 当你使用webpack进行打包的时候，生成bundles的时候，你希望给这个bundles产生hash值。（产生hash的目的就是为了清除缓存）。

This plug-in outputs a json file with the paths of the generated assets so you can find them from somewhere else. 这个插件输出一个json文件包含生成的资源的路径，所以你可以从别的地方找到它们。

Example output:

The output is a JSON object in the form:

{
    "bundle_name": {
        "asset_kind": "/public/path/to/asset"
    }
}

Where:哪里： "bundle_name" is the name of the bundle (the key of the entry object in your webpack config, or "main" if your entry is an array). “bundle_name”是捆绑包的名称（webpack配置中的条目对象的键，如果您的条目是数组，则为“main”）。 "asset_kind" is the camel-cased file extension of the asset “asset_kind”是资产的骆驼级文件扩展名

比如，这个是我运行，angular2-webpack-starter时候，产生的webpack-assets.json中的内容， 可以看到，这个：

"polyfills": {
    "js": "polyfills.bundle.js"
  },

根据webpack.common.js文件中的内容：

polyfills是打包入口文件的key文件的名字，js表示的意思打包之后产生的文件的扩展名字， 而最后的polyfills.bundle.js是打包之后的文件的完整名字。

For example, given the following webpack config: 例如，如下的webpack配置文件。

{
    entry: {
        one: ['src/one.js'],
        two: ['src/two.js']
    },
    output: {
        path: path.join(__dirname, "public", "js"),
        publicPath: "/js/",
        filename: '[name]_[hash].bundle.js'
    }
}

The plugin will output the following json file: 插件将会生成如下的json文件。

{
    "one": {
        "js": "/js/one_2bb80372ebe8047a68d4.bundle.js"
    },
    "two": {
        "js": "/js/two_2bb80372ebe8047a68d4.bundle.js"
    }
}

【总之就是说：one是webpack.config.js中的entry中的入口文件的key，而左边的js只的是最终的生成的文件的类型，而右边的则是最终生成的文件的存放路径和名字】

配置： In your webpack config include the plug-in. And add it to your config: 使用和配置方式如下：

var path = require('path')
var AssetsPlugin = require('assets-webpack-plugin')
var assetsPluginInstance = new AssetsPlugin()

module.exports = {
    // ... 
    output: {
        path: path.join(__dirname, "public", "js"),
        filename: "[name]-bundle-[hash].js",
        publicPath: "/js/"
    },
    // .... 
    plugins: [assetsPluginInstance]
}

Options 选项 You can pass the following options: 你能传递如下的选项： filename 文件名字 最终产生的这个json文件的名字 Optional. webpack-assets.json by default. Name for the created json file. new AssetsPlugin({filename: 'assets.json'})

fullPath Optional. true by default. 默认是true设置 If false the output will not include the full path of the generated file. 如果为false，输出将不包括生成的文件的完整路径。

new AssetsPlugin({fullPath: false})

e.g. /public/path/bundle.js vs bundle.js vs 【也就是说，在json文件中，生成的最终的文件的名字，是否包含一个完整的路径和文件名字，是通过这个东西来进行控制的。如果设置为true那么就是/public/path/bundle.js否则就是bundle.js】

includeManifest

Optional. false by default .默认是false 选项设置

Inserts the manifest javascript as a text property in your assets. 插入明显的（货单）JavaScrip作为一个文本属性在你的资产中。 Accepts the name of your manifest chunk. A manifest is the last CommonChunk that only contains the webpack bootstrap code. This is useful for production use when you want to inline the manifest in your HTML skeleton for long-term caching. See issue #1315 or a blog post to learn more. 接受您的清单块的名称。 清单是最后一个只包含webpack引导代码的CommonChunk。 （换句话说，这个text里面有的就是webpack引导代码的commonChunk） 当您希望将HTML框架中的清单内联用于长期缓存时，这对于生产使用非常有用。 有关详细信息，请参阅问题＃1315或博文。

new AssetsPlugin({includeManifest: 'manifest'})
// assets.json: 
// {entries: {manifest: {js: `hashed_manifest.js`, text: 'function(modules)...'}}} 
// 
// Your html template: 
// <script> 
// {assets.entries.manifest.text} 
// </script> 

path 设置json文件的保存路径 Optional. Defaults to the current directory. Path where to save the created JSON file. 可选的。 默认为当前目录。路径保存创建的JSON文件。 new AssetsPlugin({path: path.join(__dirname, 'app', 'views')})

prettyPrint 漂亮的打印 Optional. false by default. 产生的json文件是否被格式化。如果不格式化，那么就生成一行 Whether to format the JSON output for readability. new AssetsPlugin({prettyPrint: true})

processOutput Optional. Defaults is JSON stringify function. Formats the assets output. 可选的。 默认是JSON stringify函数。 格式化资产产出。

new AssetsPlugin({
  processOutput: function (assets) {
    return 'window.staticMap = ' + JSON.stringify(assets)
  }
})

就是按照自己的需求来产生定制的格式化的json文件内容。例如上面的配置就会产生如下的json文件内容。也就是在原来的json文件中添加了这个字符串，同时把原来的格式化好的json现在不再格式化了，把json转换成为了一个字符串。
“window.staticMap = ”
window.staticMap = {"polyfills":{"js":"polyfills.bundle.js"},"main":{"js":"main.bundle.js"},"vendor":{"js":"vendor.bundle.js"},"manifest":{"js":"manifest.bundle.js"}}

update Optional. false by default. When set to true, the output JSON file will be updated instead of overwritten. 当设置为true时，输出的JSON文件将被更新而不是覆盖。

new AssetsPlugin({update: true})

metadata Inject metadata into the output file. All values will be injected into the key "metadata". 注入元数据到输出文件中。 所有的值将被key元数据。

new AssetsPlugin({metadata: {version: 123}})
// Manifest will now contain: 
// { 
//   metadata: {version: 123} 
// }

例如上面的配置将会产生这样的json文件.

Using in multi-compiler mode

If you use webpack multi-compiler mode and want your assets written to a single file, you must use the same instance of the plugin in the different configurations. 如果您使用webpack多编译器模式并将资源写入单个文件，则必须在不同配置中使用相同的插件实例。（就是说你要同时编译多个东西，或者说编译多个项目，要生成不同的json文件，那么就要多次使用这个插件，在不同的配置文件中）

For example:

var webpack = require('webpack')
var AssetsPlugin = require('assets-webpack-plugin')
var assetsPluginInstance = new AssetsPlugin()

webpack([
  {
    entry: {one: 'src/one.js'},
    output: {path: 'build', filename: 'one-bundle.js'},
    plugins: [assetsPluginInstance]
  },
  {
    entry: {two:'src/two.js'},
    output: {path: 'build', filename: 'two-bundle.js'},
    plugins: [assetsPluginInstance]
  }
])

Using this with Rails【与Rails配合使用，这个不用看】

You can use this with Rails to find the bundled Webpack assets via Sprockets. In ApplicationController you might have: 您可以使用它与Rails通过链轮查找捆绑的Webpack资产。 在ApplicationController中，您可能有：

def script_for(bundle)
  path = Rails.root.join('app', 'views', 'webpack-assets.json') # This is the file generated by the plug-in 
  file = File.read(path)
  json = JSON.parse(file)
  json[bundle]['js']
end

Then in the actions:

def show
  @script = script_for('clients') # this will retrieve the bundle named 'clients' 
end

And finally in the views:

<div id="app">
  <script src="<%= @script %>"></script> 
</div>

[Christian-Yang]

下面是angular starter中的webpack.common.js中的代码。

 /**
     * Add additional plugins to the compiler.
     * 向编译器添加额外的插件。
     * See: http://webpack.github.io/docs/configuration.html#plugins
     */
    plugins: [
      // Use for DLLs   用于DLL
      // new AssetsPlugin({
      //   path: helpers.root('dist'),//生成的json文件位于当前目录的上级目录下的dist文件
      //   filename: 'webpack-assets.json',//生成的文件名字叫做webpack-assets.json
      //   prettyPrint: true//漂亮的打印
      // }),