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}
// }
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
翻译一下assets-webpack-plugin的文档,加深一下印象
assets-webpack-plugin
一个webpack的插件,此插件能生成一个json文件,此json文件会包含打包文件的路径文件名等信息。
目录
此插件为什么有用?
安装
配置
测试
此插件为什么有用?
当你使用webpack时,你可能想给打包之后的文件名添加hash来避免出现缓存问题。
这个webpack插件会生成一个json文件,json文件里包含你生成的assets文件的信息。你可以在别处使用这个json文件
事例:
这是生成的json文件:
解释:
"bundle_name"
入口文件的名字."asset_kind"
asset文件的扩展名以下面的这个webpack的配置举例:
使用此插件之后,会生成下面的这个json文件:
安装
配置
在你的webpack配置中引入此webpack插件,并添加到你的配置中:
此插件的配置项
你可以传入下面的这些配置项:
filename
可选,默认是
webpack-assets.json
配置生成的json文件的文件名
fullPath
可选. 默认为
true
.如果传入的是
false
,则不会包含生成的文件的路径信息e.g.
/public/path/bundle.js
vsbundle.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.path
可选. 默认值是当前路径.
定义将生成的文件放置到哪里.
prettyPrint
可选. 默认值是
false
.是否格式化生成好的json文件,这样更易读.
processOutput
可选. 默认值为一个JSON stringify function.
Formats the assets output.
update
可选. 默认值
false
.当设置为
true
之后,输出的接送文件将不再是重写而是更新metadata
向输出的文件插入metadata,所有的配置的值都会挂载到属性“metadata”上
在多页面模式下使用
如果你想在多页面模式下使用,并且把所有页面的assets信息写入单个json文件,在各个页面的配置中你必须使用插件的同一实例。
举例说明:
在Rails里使用
You can use this with Rails to find the bundled Webpack assets via Sprockets. In
ApplicationController
you might have:Then in the actions:
And finally in the views:
Test
http://www.qdfuns.com/notes/31643/b6423d0fe029797c70f6e8db68b8e8d5.html https://github.com/kossnocorp/assets-webpack-plugin