attach-version-webpack-plugin is webpack plugin for inject asset version in template files.
npm i --D attach-version-webpack-plugin
webpack.config.js
const AttachVersionWebpackPlugin = require('attach-version-webpack-plugin');
module.exports = {
entry: 'index.js',
output: {
path: 'path/to/dist',
filename: 'index.bundle.js'
},
plugins: [
new AttachVersionWebpackPlugin({
context: 'path/to' // The base directory, an absolute path, for resolving entry points.
templates: [
'index.html' // The template directory, an relative path via context path.
...
]
}),
]
}
Template files move through declared webpack output path.
if online, injected remote asset version.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
...
<!-- css asset -->
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fgithub.com%2Fpath%2Fto%2Ftest.css%3Fv%3D07798350">
...
<!-- remote javascript asset -->
<script type="text/javascript" src="proxy.php?url=https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Freact-router%2F4.2.0%2Freact-router.min.js%3Fv%3D59eb182b"></script>
</head>
<body>
<!-- internal javascript asset -->
<script type="text/javascript" src="proxy.php?url=https%3A%2F%2Fgithub.com%2Fcommon_bundle.js%3Fv%3D747ec249"></script>
...
</body>
</html>
| Name | Type | Default | Description |
|---|---|---|---|
context |
{String} |
'' |
The base directory, an absolute path, for resolving entry points.context: '/src'templates: ['index.html'] // /src/index.html |
templates |
{Array} |
'[]' |
The template directory, an relative path via context path. |
context: '/src'
templates: ['index.html'] // /src/index.html