Webpack Helpers

 

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

- Explore the interfaces: TSDoc
- View the changelog: Releases

$3

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

$3

``bash


latest stable


yarn add -D @stoplight/webpack
`

$3

In your webpack.config.ts file:

`ts
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;
`

$3

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