1.2.0 • Published 5 years ago
html-webpack-assets-plugin v1.2.0
npm i --save-dev html-webpack-assets-plugin
yarn add --dev html-webpack-assets-plugin
兼容性
- webpack >=4
- html-webpack-plugin >=3
警告 :warning::warning::warning:
!!!注意: 如果使用 html-webpack-plugin@3.x.x 的版本,需要把 html-webpack-plugin
放在 html-webpack-assets-plugin
之前, 确保 html-webpack-plugin
先于 assets-plugin
注册.
配置示例
webpack.config.js
const AssetsPlugin = require('html-webpack-assets-plugin')
module.exports = {
entry: 'src/index.js',
output: {
path: __dirname + '/dist',
filename: 'index_bundle.js'
},
plugins: [
plugins: [
new HtmlWebpackPlugin()
],
new AssetsPlugin({
// 可选, 给所有 script 添加属性
attrs: {
'data-all': 'all'
},
// 可选, 用于webpack 从入口打包而输出的 js 文件, 添加属性
bundle: {
'data-bundle': 'bundle'
},
//可选, 插入 script, assets 应该是远程地址, 因为不用有文件输出到打包目录
online: [
{
append: true, // assets 列表的资源会添加到插入到后面, 默认false
assets: [
'http://a.b.com/aaa/index.js',
'http://a.b.com/aaa/gc.js',
]
},
{
assets: [
'http://a.b.com/bbb/index.js',
'http://a.b.com/bbb/gc.js',
]
},
],
// 可选
// 插入script, src最终应该指向本地文件,
// 本地资源会被复制到输出目录,
// 并对文件名添加 contentHash
local: {
root: './', // 本地资源的相对根目录目录, 默认为 当前工作目录,
src: [
'./public/d3.js',
'./public/d100.js',
]
}
})
]
}
假设你有如下工作目录:
project
|---src
|---public
| |---d3.js
| |---d100.js
|---index.html
|---src
| |---index.js
|---index.html
|---webpack.config.js
打包后 dist 的输出文件:
dist
|---index_bundle.js
|---d3.js
|---d100.js
搭配 html-webpack-plugin 后, 输出的 html
的 script 部分为:
...
<script data-all="all" src="http://a.b.com/bbb/index.js"></script>
<script data-all="all" src="http://a.b.com/bbb/gc.js"></script>
<script data-all="all" src="d3.js"></script>
<script data-all="all" src="d100.js"></script>
<script data-all="all" data-bundle="bundle" src="index_bundle.js"></script>
<script data-all="all" src="http://a.b.com/aaa/index.js"></script>
<script data-all="all" src="http://a.b.com/aaa/gc.js"></script>
...
options
attrs
- 可选
为所有 script 添加 属性
{
attrs: {
'data-a': string
},
}
bundle
- 可选
为 webpack
入口打包生成的 script
标签 添加属性
{
bundle: {
'data-bundle': 'bundle'
}
}
online
- 可选
注意: 打包到输出目录
为 webpack
入口打包生成的 script
标签 添加属性
{
online: [
{
append: true, // assets 列表的资源会添加到插入到后面, 默认false
assets: [
'http://a.b.com/aaa/index.js',
'http://a.b.com/aaa/gc.js',
]
},
{
assets: [
'http://a.b.com/bbb/index.js',
'http://a.b.com/bbb/gc.js',
]
},
]
}
local
- root: 可选, 指定文件的根目录, 值相对路径则为当前的工作目录,
- src: 列出本地文件
为 webpack
入口打包生成的 script
标签 添加属性
{
local: {
root: <string>, // 可选, 默认: './',
src: Array<string>
}
}