ms-webpack
A webpack plugin for Metalsmith.
Installation
add to your package.js dependencies
npm install --save ms-webpack
Usage
var 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' // ... ;
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.
Options
See the webpack configuration documentation for details.
Referencing compiled files in templates
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)
Development
Compile and watch with $ npm run dev
License
MIT License, see LICENSE for details.