Home Original page

GitHub - stoplightio/webpack: Webpack helpers, built on top of webpack-chain.

Maintainability Test Coverage

Plugins, built around webpack-chain, that make creating webpack configs easier.

Plugins

  • BrowserFS: Replace the native fs module with the BrowserFS equivalent.
    • Note: must yarn add browserfs in your project if using this plugin.
  • Bugsnag: Upload sourcemaps to bugsnag.
  • CSS: Import css.
  • Fonts: Import fonts.
  • HTML: Render an html template.
  • Javascript: Parse javascript.
  • Monaco: Import monaco.
    • Note: must yarn add monaco-editor in your project if using this plugin.
  • Optimizations: Minification, chunks, etc.
  • Presentation: Better terminal output.
  • Public: Use a public assets folder.
  • Serve: Serve up a hot reloading dev environment.
  • Stylus: Import stylus.
  • Typescript: Parse typescript (and optionally also javascript).
  • Web Workers: Import web workers.

Installation

# latest stable
yarn add -D @stoplight/webpack

Usage

In your webpack.config.ts file:

import { createConfig } from "@stoplight/webpack";
import * as path from "path";
import webpack from "webpack";

import { buildEnv } from "./env";

const isElectron = process.env.RUN_CONTEXT === "desktop";

const config: webpack.Configuration = createConfig({
  srcDir: path.resolve(process.cwd(), "src"),
  distDir: isElectron
    ? path.resolve(process.cwd(), "desktop", "src", "dist")
    : path.resolve("desktop", "src", "dist"),
  publicDir: path.resolve(process.cwd(), "src", "public"),
  isElectron,
  analyze: false,
  debug: false,
  stats: undefined,
  plugins: {
    browserfs: isElectron ? undefined : {},
    bugsnag: undefined,
    css: undefined,
    fonts: {},
    html: {
      // string to assign to the head title tag
      title: "Stoplight Studio",

      // object to assign to window.env in a head tag script
      env: buildEnv(),

      // string of html to be inserted towards the top of the head tag
      metaHtml: "",

      // string of html to be inserted towards the bottom of the head tag
      headHtml: "",

      // string of html to be inserted towards the bottom of the body tag
      bodyHtml: ""
    },
    javascript: undefined,
    monaco: {},
    optimizations: {},
    presentation: {},
    public: undefined,
    serve: {},
    stylus: undefined,
    typescript: {},
    workers: undefined
  },
  onBeforeBuild: _config => {
    // ...do whatever you want w config, which is an instance of webpack-chain
  }
});

export default config;

Contributing

  1. Clone repo
  2. Create / checkout feature/{name}, chore/{name}, or fix/{name} branch
  3. Install deps: yarn setup
  4. Make your changes
  5. Run tests: yarn test.prod
  6. Stage relevant files to git
  7. Commit: yarn commit. NOTE: Commits that don't follow the conventional format will be rejected. yarn commit creates this format for you, or you can put it together manually and then do a regular git commit.
  8. Push: git push
  9. Open PR targeting the develop branch