# @crasman/stage-webpack

> Webpack configs and scripts for Stage / Studio

Latest version **1.25.3** (published 2024-12-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install @crasman/stage-webpack
pnpm add @crasman/stage-webpack
yarn add @crasman/stage-webpack
bun add @crasman/stage-webpack
```

Provides the command `stage-webpack`.

## Health

**Score 25/100 (F)** — status: maintenance-mode.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.25.3 |
| Published | 2024-12-03 |
| First published | 2020-03-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 87 |
| Unpacked size | 159.2 KB |
| Known vulnerabilities | 0 (+10 in 4 direct dependencies) |
| Install scripts | no |
| Maintainers | phcras, _crasman, mlcras, joonava, kimja, mosesho, crasman-tiina-heikkila |

## Links

- npm: https://www.npmjs.com/package/@crasman/stage-webpack
- Repository: https://github.com/crasman/stage-webpack
- Homepage: https://github.com/crasman/stage-webpack#readme
- Issues: https://github.com/crasman/stage-webpack/issues
- npm.io page: https://npm.io/package/@crasman/stage-webpack

## Dependencies (87)

- [sass](https://npm.io/package/sass.md) ^1.35.0
- [boxen](https://npm.io/package/boxen.md) ^5.1.2
- [yargs](https://npm.io/package/yargs.md) ^15.1.0
- [dotenv](https://npm.io/package/dotenv.md) ^8.2.0
- [eslint](https://npm.io/package/eslint.md) ^7.32.0
- [cheerio](https://npm.io/package/cheerio.md) 1.0.0-rc.12
- [express](https://npm.io/package/express.md) ^4.21.1
- [install](https://npm.io/package/install.md) ^0.13.0
- [postcss](https://npm.io/package/postcss.md) ^8.0.0
- [webpack](https://npm.io/package/webpack.md) ^4.41.6
- [filesize](https://npm.io/package/filesize.md) ^6.1.0
- [fs-extra](https://npm.io/package/fs-extra.md) ^8.1.0
- [inquirer](https://npm.io/package/inquirer.md) ^8.2.0
- [prettier](https://npm.io/package/prettier.md) ^2.5.1
- [url-join](https://npm.io/package/url-join.md) ^4.0.1
- [stylelint](https://npm.io/package/stylelint.md) ^14.1.0
- [blueconfig](https://npm.io/package/blueconfig.md) ^6.2.2
- [css-loader](https://npm.io/package/css-loader.md) ^3.4.2
- [strip-ansi](https://npm.io/package/strip-ansi.md) ^6.0.0
- [text-table](https://npm.io/package/text-table.md) ^0.2.0
- [url-loader](https://npm.io/package/url-loader.md) ^3.0.0
- [vue-loader](https://npm.io/package/vue-loader.md) ^15.8.3
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.16.0
- [@types/node](https://npm.io/package/@types/node.md) ^13.7.1
- [cosmiconfig](https://npm.io/package/cosmiconfig.md) ^6.0.0
- [file-loader](https://npm.io/package/file-loader.md) ^5.0.2
- [html-loader](https://npm.io/package/html-loader.md) ^0.5.5
- [sass-loader](https://npm.io/package/sass-loader.md) ^8.0.2
- [babel-loader](https://npm.io/package/babel-loader.md) ^8.0.6
- [cache-loader](https://npm.io/package/cache-loader.md) ^4.1.0
- [comment-json](https://npm.io/package/comment-json.md) ^4.1.1
- [style-loader](https://npm.io/package/style-loader.md) ^1.1.3
- [detect-indent](https://npm.io/package/detect-indent.md) ^6.1.0
- [dotenv-expand](https://npm.io/package/dotenv-expand.md) ^5.1.0
- [eslint-loader](https://npm.io/package/eslint-loader.md) ^3.0.3
- [studio-helper](https://npm.io/package/studio-helper.md) ^1.19.3
- [webpack-merge](https://npm.io/package/webpack-merge.md) ^4.2.2
- [@oclif/command](https://npm.io/package/@oclif/command.md) ^1.8.16
- [@types/cheerio](https://npm.io/package/@types/cheerio.md) ^0.22.16
- [@types/express](https://npm.io/package/@types/express.md) ^4.17.2
- [extract-loader](https://npm.io/package/extract-loader.md) ^4.0.1
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^4.3.0
- [@types/fs-extra](https://npm.io/package/@types/fs-extra.md) ^8.0.1
- [@types/url-join](https://npm.io/package/@types/url-join.md) ^4.0.0
- [react-dev-utils](https://npm.io/package/react-dev-utils.md) ^10.2.0
- [webpack-sources](https://npm.io/package/webpack-sources.md) ^3.2.3
- [@types/stylelint](https://npm.io/package/@types/stylelint.md) ^9.10.1
- [@types/strip-ansi](https://npm.io/package/@types/strip-ansi.md) ^5.2.1
- [@types/text-table](https://npm.io/package/@types/text-table.md) ^0.2.1
- [eslint-plugin-vue](https://npm.io/package/eslint-plugin-vue.md) ^6.1.2
- [express-subdomain](https://npm.io/package/express-subdomain.md) ^1.0.5
- [@types/webpack-env](https://npm.io/package/@types/webpack-env.md) ^1.15.1
- [postcss-preset-env](https://npm.io/package/postcss-preset-env.md) ^7.0.1
- [resolve-url-loader](https://npm.io/package/resolve-url-loader.md) ^3.1.1
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^3.10.3
- [@crasman/branch-bar](https://npm.io/package/@crasman/branch-bar.md) ^1.24.10
- [eslint-plugin-babel](https://npm.io/package/eslint-plugin-babel.md) ^5.3.0
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) ^7.18.3
- [react-error-overlay](https://npm.io/package/react-error-overlay.md) 6.0.9
- [@babel/eslint-parser](https://npm.io/package/@babel/eslint-parser.md) ^7.17.0
- [@types/sockjs-client](https://npm.io/package/@types/sockjs-client.md) ^1.1.1
- [@types/vfile-message](https://npm.io/package/@types/vfile-message.md) ^2.0.0
- [@types/webpack-merge](https://npm.io/package/@types/webpack-merge.md) ^4.1.5
- [image-webpack-loader](https://npm.io/package/image-webpack-loader.md) ^6.0.0
- [assets-webpack-plugin](https://npm.io/package/assets-webpack-plugin.md) ^3.9.10
- [eslint-webpack-plugin](https://npm.io/package/eslint-webpack-plugin.md) ^2.5.2
- [http-proxy-middleware](https://npm.io/package/http-proxy-middleware.md) 0.19.1
- [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) ^2.3.5
- [vue-template-compiler](https://npm.io/package/vue-template-compiler.md) ^2.6.11
- [@types/react-dev-utils](https://npm.io/package/@types/react-dev-utils.md) ^9.0.4
- [workbox-webpack-plugin](https://npm.io/package/workbox-webpack-plugin.md) ^5.0.0
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^0.9.0
- [webpack-bundle-analyzer](https://npm.io/package/webpack-bundle-analyzer.md) ^4.4.0
- [stylelint-webpack-plugin](https://npm.io/package/stylelint-webpack-plugin.md) ^2.3.1
- [@types/webpack-dev-server](https://npm.io/package/@types/webpack-dev-server.md) ^3.10.0
- [stylelint-config-standard](https://npm.io/package/stylelint-config-standard.md) ^24.0.0
- [compression-webpack-plugin](https://npm.io/package/compression-webpack-plugin.md) ^6.0.2
- [filemanager-webpack-plugin](https://npm.io/package/filemanager-webpack-plugin.md) ^5.0.0
- [progress-bar-webpack-plugin](https://npm.io/package/progress-bar-webpack-plugin.md) ^2.1.0
- [@types/http-proxy-middleware](https://npm.io/package/@types/http-proxy-middleware.md) ^0.19.3
- [css-minimizer-webpack-plugin](https://npm.io/package/css-minimizer-webpack-plugin.md) ^1.3.0
- [speed-measure-webpack-plugin](https://npm.io/package/speed-measure-webpack-plugin.md) ^1.3.1
- [fork-ts-checker-webpack-plugin](https://npm.io/package/fork-ts-checker-webpack-plugin.md) ^6.1.1
- [stylelint-config-standard-scss](https://npm.io/package/stylelint-config-standard-scss.md) ^3.0.0
- [@crasman/babel-preset-stage-webpack](https://npm.io/package/@crasman/babel-preset-stage-webpack.md) ^1.24.10
- [@crasman/eslint-config-stage-webpack](https://npm.io/package/@crasman/eslint-config-stage-webpack.md) ^1.24.10
- [@crasman/stylelint-config-stage-webpack](https://npm.io/package/@crasman/stylelint-config-stage-webpack.md) ^1.24.10

## Recent versions

- 1.25.3 (latest) — 2024-12-03
- 0.1.0-0 (next) — 2020-03-06
- 1.25.2 — 2024-10-08
- 1.25.1 — 2024-09-13
- 1.24.10 — 2024-09-13
- 1.24.9 — 2024-02-07
- 1.24.8 — 2023-12-14
- 1.24.6 — 2023-12-13
- 1.24.6-alpha.0 — 2023-12-13
- 1.24.5 — 2023-11-01
- 1.24.3 — 2023-01-20
- 1.24.2 — 2022-06-15
- 1.24.1 — 2022-03-22
- 1.24.0 — 2022-03-11
- 1.23.2-alpha.1 — 2022-03-11
- … 68 more at https://npm.io/package/@crasman/stage-webpack/versions

## README

# stage-webpack

Webpack bundling processes desgined to work well with Stage / Studio environment

## Installation

This is installed automatically if you use `@crasman/create-stage-webpack` to create new project, also the configuration is taken care of.

To install manually run `npm install stage-webpack --save-dev`

## Configuration

Config file (`stage-webpack.config.js`) needs to be found in project root folder. See [config documentation](https://github.com/crasman/stage-webpack/blob/master/packages/stage-webpack/docs/config.md)

You also need to setup linters and build process configuration. Click links for examples on how to use and extend `stage-webpack` defaults:

- babel: [babel.config.js](https://github.com/crasman/stage-webpack/blob/master/packages/stage-webpack/docs/babel.md)
- postcss: [postcss.config.js](https://github.com/crasman/stage-webpack/blob/master/packages/stage-webpack/docs/postcss.md)
- eslint: [.eslintrc](https://github.com/crasman/stage-webpack/blob/master/packages/stage-webpack/docs/eslint.md)
- stylelint: [.stylelintrc.js](https://github.com/crasman/stage-webpack/blob/master/packages/stage-webpack/docs/stylelint.md)

These files should be stored in the root of your project.

### Service worker setup

If defined (`config.files.serviceWorker`), we expect to find `self.__WB_MANIFEST` in the service worker file for precaching built assets. Example [service-worker.js](https://github.com/crasman/stage-webpack/blob/master/packages/stage-webpack/docs/service-worker.md) setup

### Extending stage-webpack.config.js

You can extend project settings with local ones by placing another `stage-webpack.config.js` file outside of the project folder. This way you can [generate valid SSL certificate](https://github.com/crasman/stage-webpack/blob/master/packages/stage-webpack/docs/dev-server-certificate.md) that you can use for all your `stage-webpack` dev servers.

## Scripts

- `stage-webpack start`: Start dev server. Change proxy target with `--sw-stage-url <config.stage.urls[target]>`. E.g. `stage-webpack-scripts start --sw-stage-url admin`
- `stage-webpack build`: Build files and upload to Studio
- `stage-webpack watch`: Dev version of `build`. Should only be used when dev server can't be used, for example when developing Prince XML which requires that server has access to needed files.
- `stage-webpack update-project`: Can be used to apply automatic fixes to source files if there are any available

## Client environment variables

Exposed to client:

- `PUBLIC_PATH`: Can be used to register service worker etc.
- `NODE_ENV`: `'production'`, `'development'` or `'test'`
- `DEV_SERVER`: `undefined` or `'true'`
- `SW_<anything>`: Any env variable prefixed with `SW_` can be used in client code. E.g `SW_TEST = 'test'` can be accessed with `process.env.SW_TEST`

## Development

### Linking to test project for Webpack testing

#### Link @crasman/stage-webpack

Just run `npm link` inside `packages/stage-webpack` folder

#### Link to your test project

This is little tricky to link thanks to how `npm link` [now works](https://github.com/npm/cli/issues/2339) (>= 7.0.0). Step 4 works around this new limitation by installing all other monorepo packages as dependencies.

1. Go to your project's folder
2. Switch to same Node version as you use for `@crasman/stage-webpack` developing
3. Remove `node_modules` and `package-lock.json` and run `npm install` if you needed to change Node version
4. `npm install @crasman/babel-preset-stage-webpack @crasman/branch-bar @crasman/eslint-config-stage-webpack @crasman/stylelint-config-stage-webpack`
5. `npm link @crasman/stage-webpack`
6. Start testing Webpack functionality

---
_Source: https://npm.io/package/@crasman/stage-webpack · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._