Assets to map
A plugin for webpack
Summary
Main goal
Extract bundle(s) generated by webpack and add it in a file JSON or YAML or TOML.
What for?
Originally we used it on a Hugo.io project: we needed to inline in a template style and script generated by Webpack.
To do so, we decided to go through /Data repertory to access it with Hugo environment variables .Data
.
How to use?
Install
$ npm install --save-dev assets-to-map-webpack-plugin
or
$ yarn add -D assets-to-map-webpack-plugin
Implementation
moduleexports = // more webpack config plugins: // options
Options
- sourcePath -
{String}
(default:""
)
Where to find the assets you need to put in the Json file - outputPath -
{String}
(default:""
)
Where to generate the json file - filename -
{String}
(default:""
)
Name of the destination file. Don't specify the extension. - format - {String} (default:
"json"
)
Possible values:"json"
"toml"
"yaml"
(The format will also defines the extension of the output file)
- files -
{Object}
required
Example:{key: "name"}
key
will be used as the key in the generated json filename
is the name of the bundle you're appending to the generated json file.
- deleteFiles -
{Bool}
(default:false
)
allows the plugin to delete source files inlined if true - verbose -
{Bool}
(default:false
)
Example
The example below will create a file ./site/data/assets.json
containing two keys: css
(from the file generated by ExtractTextPlugin) and js
, both located in ./site/static
.
tracking.js
will not be included in assets.json
for it's not declared in the files
option.
const webpack = require("webpack");const ExtractTextPlugin = require("extract-text-webpack-plugin");+const AssetsToMap = require('assets-to-map-webpack-plugin'); module.exports = { entry: { main: [ "./assets/js/app.js", "./assets/css/main.css" ], tracking: "./assets/js/tracking.js", }, output: { path: path.join(__dirname, "site/static"), filename: "[name].js" }, module: { loaders: [ // ... ] }, plugins: [ new ExtractTextPlugin("[name].css"), // JS optimizations like // new UglifyJSPlugin(),+ new AssetsToMap({+ sourcePath: "site/static/",+ outputPath: "site/data/",+ filename: "assets",+ files: {+ css: "main.css",+ js: "main.js"+ }+ }), ]};