Package Exports

js-output-file-webpack-plugin

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (js-output-file-webpack-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

JS Output to File Webpack Plugin

Lightweight webpack plugin that takes in a JS file and writes its output into a file.

Useful for generating files like manifest.json.

Installation

yarn add --dev js-output-file-webpack-plugin

npm i --save-dev js-output-file-webpack-plugin

Usage

In webpack.config.js:

const JSOutputFilePlugin = require('js-output-file-webpack-plugin');

const config = {
  context: path.join(__dirname, 'src'),
  output: {
    path: path.join(__dirname, 'dist')
  },
  plugins: [
    new JSOutputFilePlugin({
      source: 'manifest.json.js'
    })
  ]
};

module.exports = config;

In src/manifest.json.js:

const pkg = require('./package.json');

module.exports = env => {
  const manifest = {
    name: 'Example manifest',
    // use some dynamically generated variables
    version: pkg.version,
    icons: {
      '16': 'icons/icon16.png',
      '48': 'icons/icon48.png',
      '128': 'icons/icon128.png'
    },
    background: {
      scripts: ['bg.js'],
      persistent: false
    }
  };
  // environment specific rendering
  if (env === 'development') {
    manifest['content_security_policy'] =
      "script-src 'self' 'unsafe-eval'; object-src 'self'";
  }
  return manifest;
};

JSOutputFilePlugin will output a file of the same name in output directory, with the .js extension stripped.

Running the webpack compiler will yield dist/manifest.json:

// Prettified for example purposes.
// Actual JSON output will be minified unless the return value is a string.
{
  "name": "Example manifest",
  "version": "2.0.1",
  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  },
  "background": {
    "scripts": [
      "bg.js"
    ],
    "persistent": false
  },
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

License

MIT