翻译一下assets-webpack-plugin的文档，加深一下印象

assets-webpack-plugin

一个webpack的插件，此插件能生成一个json文件，此json文件会包含打包文件的路径文件名等信息。

此插件为什么有用?

当你使用webpack时，你可能想给打包之后的文件名添加hash来避免出现缓存问题。

这个webpack插件会生成一个json文件，json文件里包含你生成的assets文件的信息。你可以在别处使用这个json文件

事例:

这是生成的json文件:

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

解释:

"bundle_name" 入口文件的名字.
"asset_kind" asset文件的扩展名

以下面的这个webpack的配置举例:

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

使用此插件之后，会生成下面的这个json文件:

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

安装

npm install assets-webpack-plugin --save-dev

配置

在你的webpack配置中引入此webpack插件，并添加到你的配置中：

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]
}

此插件的配置项

你可以传入下面的这些配置项:

`filename`

可选，默认是webpack-assets.json

配置生成的json文件的文件名

new AssetsPlugin({filename: 'assets.json'})

`fullPath`

可选. 默认为true.

如果传入的是false,则不会包含生成的文件的路径信息

new AssetsPlugin({fullPath: false})

e.g.

/public/path/bundle.js vs bundle.js vs

`includeManifest`

可选. 默认为false.

Inserts the manifest javascript as a text property in your assets. 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.

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`

可选. 默认值是当前路径.

定义将生成的文件放置到哪里.

new AssetsPlugin({path: path.join(__dirname, 'app', 'views')})

`prettyPrint`

可选. 默认值是false.

是否格式化生成好的json文件，这样更易读.

new AssetsPlugin({prettyPrint: true})

`processOutput`

可选. 默认值为一个JSON stringify function.

Formats the assets output.

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

`update`

可选. 默认值false.

当设置为true之后，输出的接送文件将不再是重写而是更新

new AssetsPlugin({update: true})

`metadata`

向输出的文件插入metadata，所有的配置的值都会挂载到属性“metadata”上

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

在多页面模式下使用

如果你想在多页面模式下使用，并且把所有页面的assets信息写入单个json文件，在各个页面的配置中你必须使用插件的同一实例。

举例说明:

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]
  }
])

在Rails里使用

You can use this with Rails to find the bundled Webpack assets via Sprockets. In ApplicationController you might have:

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>

Test

npm test

http://www.qdfuns.com/notes/31643/b6423d0fe029797c70f6e8db68b8e8d5.html https://github.com/kossnocorp/assets-webpack-plugin

JesseZhao1990 / blog