A webpack plugin for Metalsmith.
add to your package.js dependencies
npm install --save ms-webpack
var webpack = require('ms-webpack')
var config = {
context: './src/assets/',
entry: {
main: ['./js/main.js', './css/main.css'],
vendor: './js/ventor.js'
},
output: {
path: './build',
publicPath: '/',
filename: 'js/[name].[chunkhash].js'
},
// ...
}
Metalsmith(__dirname)
.ignore('assets')
.use(webpack(config))
.build();It is necessary to manually use ignore() to prevent metalsmith from copying the files referenced by webpack if they are within the metalsmith source directory.
See the webpack configuration documentation for details.
ms-webpack populates metalsmith metadata with the output file paths from webpack. If your output file names are dynamic, this provides a way to automatically resolve them in your template.
metadata.webpack.assets maps of all source file names to their corresponding output files. eg:
{
"main.js": "/js/main.1234567890.js",
"main.css": "/css/main.1234567890.css",
"vendor.js": "/js/vendor.654210987.js"
}metadata.webpack.assetsByType is a map of all output files sorted by file extension. eg:
{
"js": ["/js/main.1234567890.js", "/js/vendor.654210987.js"]
"css": ["/css/main.7654321098.css"]
}example medatada use in a template
html
head
- var styleSheets = webpack.assetsByType.css
if styleSheets
each file in styleSheets
link(rel="stylesheet" href=file)
body
//- ...
- var scripts = webpack.assetsByType.js
if scripts
each file in scripts
script(src=file)
Compile and watch with $ npm run dev
MIT License, see LICENSE for details.