# @gasket/plugin-webpack

> Adds webpack support to your application

Latest version **7.4.1** (published 2026-05-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install @gasket/plugin-webpack
pnpm add @gasket/plugin-webpack
yarn add @gasket/plugin-webpack
bun add @gasket/plugin-webpack
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 7.4.1 |
| Published | 2026-05-13 |
| First published | 2019-12-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 42.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 144 |
| Author | GoDaddy Operating Company, LLC |
| Maintainers | kinetifex, 3rdeden, kawikabader, mmason2, jpina1-godaddy, bbetts, ecarlson-godaddy, rxmarbles |
| Keywords | gasket, plugin, webpack |

## Links

- npm: https://www.npmjs.com/package/@gasket/plugin-webpack
- Repository: https://github.com/godaddy/gasket
- Homepage: https://github.com/godaddy/gasket/tree/main/packages/gasket-plugin-webpack
- Issues: https://github.com/godaddy/gasket/issues
- npm.io page: https://npm.io/package/@gasket/plugin-webpack

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 7.4.1 (latest) — 2026-05-13
- 8.0.0-next.4 (next) — 2026-10-26
- 0.0.0-react19-20260205182644 (react19) — 2026-02-05
- 0.0.0-canary-20260205165418 (canary) — 2026-02-05
- 6.47.5 (lts) — 2024-09-26
- 7.0.0-cli.7 (cli) — 2024-03-25
- 6.46.2-esm.0 (esm) — 2024-02-26
- 8.0.0-next.3 — 2026-10-13
- 8.0.0-next.2 — 2026-06-09
- 8.0.0-next.1 — 2026-01-28
- 7.4.0 — 2025-11-12
- 0.0.0-canary-20251110223653 — 2025-11-10
- 0.0.0-canary-20251110190950 — 2025-11-10
- 0.0.0-canary-20251110180228 — 2025-11-10
- 0.0.0-canary-20251106182923 — 2025-11-06
- … 201 more at https://npm.io/package/@gasket/plugin-webpack/versions

## README

# @gasket/plugin-webpack

Adds Webpack support to your application.

## Installation

```sh
npm i @gasket/plugin-webpack
```

Update your `gasket` file plugin configuration:

```diff
// gasket.js

+ import pluginWebpack from '@gasket/plugin-webpack';

export default makeGasket({
  plugins: [
+   pluginWebpack
  ]
});
```

## Configuration

The Webpack plugin is configured using the `gasket.js` file.

First, add it to the `plugins` section of your `gasket.js`:

```js
export default makeGasket({
  plugins: {
    pluginWebpack
  }
});
```

If your app was previously using the `webpack` property in the
`gasket.js`, you should update your configuration to use the
[webpackConfig] lifecycle instead.

## Actions

### getWebpackConfig

This action can be used by plugins that need to gather Webpack configuration.

```js
// Any starting Webpack configuration
const initialConfig = { };

// Any additional context such as isServer or not
const context = { isServer: true };

const webpackConfig = gasket.actions.getWebpackConfig(initialConfig, context);
```

This action will execute the `webpackConfig` lifecycle and return the final
Webpack configuration object.

## Lifecycles

### webpackConfig

Executed by [getWebpackConfig](#getwebpackconfig) action,
it receives three parameters:

1. The Gasket API
2. A Webpack config object
3. A context object with the following properties:
   * `webpack` - The Webpack API.
   * `...additionalContext` - Additional context may be exposed. For example, in next.js apps, the [next.js webpack config options](https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config) are included.

A hook should return a new Webpack config object derived from the original. The
usage of [webpack-merge] is recommended when doing so since it can properly
handle the overloaded types within Webpack config properties, which can be
tricky.

```js
import webpackMerge from 'webpack-merge';

export default {
  name: 'sample-plugin',
  hooks: {
    webpackConfig: function webpackConfigHook( gasket, config, context) {
    const { isServer, webpack } = context;

    return isServer
      ? config
      : webpackMerge.merge(config, {
        plugins: [
          new webpack.DefinePlugin({
            MEANING_OF_LIFE: 42
          })
        ]
      });
    }
  }
};
```

For more details, see the additional [webpack documentation].

## GASKET_ENV Protection

This plugin automatically prevents `process.env.GASKET_ENV` from being bundled in browser code to avoid exposing server-side configuration. If detected, the build will fail with a helpful error message.

### Recommended Alternatives

Instead of using `process.env.GASKET_ENV` in any code:

1. **Use `gasket.config.env`** for environment-specific configuration:
   ```js
   // gasket.js
   export default makeGasket({
     environments: {
       dev: { apiUrl: 'http://localhost:3000' },
       prod: { apiUrl: 'https://api.example.com' }
     }
   });
   ```

2. **Use `@gasket/data`** to pass server data to the client:
   ```js
   // Server-side (in a lifecycle hook)
   export default {
     name: 'config-plugin',
     hooks: {
       publicGasketData(gasket, data) {
         return {
           ...data,
           apiUrl: gasket.config.apiUrl,
           env: gasket.config.env
         };
       }
     }
   };

   // Client-side
   import { gasketData } from '@gasket/data';
   const { apiUrl } = gasketData();
   ```

3. **Move environment logic to server-side code** and expose only necessary data through APIs or `@gasket/data`.

For more guidance, see the [environment configuration recipes].

## License

[MIT](./LICENSE.md)

<!-- LINKS -->

[webpack-merge]: https://github.com/survivejs/webpack-merge
[webpackConfig]: #webpackconfig
[webpack documentation]: ./docs/webpack.md
[environment configuration recipes]: ./docs/environment-configuration.md

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