Skip to content

Webpack helpers, built on top of webpack-chain.

License

Notifications You must be signed in to change notification settings

stoplightio/webpack

Folders and files

NameName
Last commit message
Last commit date

Latest commit

author
Marc MacLeod
Dec 13, 2018
ee266c1 · Dec 13, 2018

History

19 Commits
Nov 1, 2018
Nov 16, 2018
Nov 11, 2018
Nov 11, 2018
Nov 11, 2018
Nov 1, 2018
Dec 13, 2018
Dec 13, 2018
Dec 13, 2018
Dec 13, 2018
Dec 13, 2018

Repository files navigation

Webpack Helpers

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.
  • 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,
    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