https://github.com/stoplightio/webpack
Webpack helpers, built on top of webpack-chain.
https://github.com/stoplightio/webpack
Last synced: about 1 year ago
JSON representation
Webpack helpers, built on top of webpack-chain.
- Host: GitHub
- URL: https://github.com/stoplightio/webpack
- Owner: stoplightio
- License: apache-2.0
- Created: 2018-11-01T02:15:34.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2025-01-23T08:08:38.000Z (over 1 year ago)
- Last Synced: 2025-04-05T22:43:22.256Z (about 1 year ago)
- Language: TypeScript
- Size: 5.6 MB
- Stars: 1
- Watchers: 16
- Forks: 1
- Open Issues: 29
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Webpack Helpers
[](https://codeclimate.com/github/stoplightio/webpack/maintainability) [](https://codeclimate.com/github/stoplightio/webpack/test_coverage)
Plugins, built around [webpack-chain](https://github.com/neutrinojs/webpack-chain), that make creating webpack configs easier.
- Explore the interfaces: [TSDoc](https://stoplightio.github.io/webpack/)
- View the changelog: [Releases](https://github.com/stoplightio/webpack/releases)
### 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
```bash
# latest stable
yarn add -D @stoplight/webpack
```
### Usage
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;
```
### 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](https://github.com/marionebl/commitlint/tree/master/%40commitlint/config-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