Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including ms-webpack with all npm packages installed. Try it out:

require("webpack/package.json"); // webpack is a peer dependency. var msWebpack = require("ms-webpack")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

ms-webpack v2.0.0

A webpack plugin for Metalsmith

ms-webpack

Build Status Dependency Status Coverage Status

A webpack plugin for Metalsmith.

Installation

add to your package.js dependencies

npm install --save ms-webpack

Usage

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.

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.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free