# @radic/webpacker

> Webpacker

Latest version **7.7.0** (published 2019-12-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @radic/webpacker
pnpm add @radic/webpacker
yarn add @radic/webpacker
bun add @radic/webpacker
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 7.7.0 |
| Published | 2019-12-12 |
| First published | 2019-08-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 17 |
| Unpacked size | 891.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| Author | Robin Radic |
| Maintainers | radic |

## Links

- npm: https://www.npmjs.com/package/@radic/webpacker
- npm.io page: https://npm.io/package/@radic/webpacker

## Dependencies (17)

- [npm](https://npm.io/package/npm.md) ^6.10.2
- [dotenv](https://npm.io/package/dotenv.md) ^8.0.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [morgan](https://npm.io/package/morgan.md) ^1.9.1
- [find-up](https://npm.io/package/find-up.md) ^4.1.0
- [gluegun](https://npm.io/package/gluegun.md) ^3.3.3
- [pkg-dir](https://npm.io/package/pkg-dir.md) ^4.2.0
- [tapable](https://npm.io/package/tapable.md) ^1.1.3
- [inquirer](https://npm.io/package/inquirer.md) ^6.5.0
- [ts-loader](https://npm.io/package/ts-loader.md) ^6.0.4
- [cross-spawn](https://npm.io/package/cross-spawn.md) ^6.0.5
- [webpack-chain](https://npm.io/package/webpack-chain.md) ^6.0.0
- [ts-import-plugin](https://npm.io/package/ts-import-plugin.md) ^1.6.1
- [@yarnpkg/lockfile](https://npm.io/package/@yarnpkg/lockfile.md) ^1.1.0
- [copy-webpack-plugin](https://npm.io/package/copy-webpack-plugin.md) ^5.0.4
- [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^0.8.0
- [webpack-bundle-analyzer](https://npm.io/package/webpack-bundle-analyzer.md) ^3.3.2

## Recent versions

- 7.7.0 (latest) — 2019-12-12
- 7.6.1 — 2019-12-07
- 7.6.0 — 2019-12-07
- 7.5.1 — 2019-12-07
- 7.5.0 — 2019-12-07
- 7.4.0 — 2019-12-07
- 7.3.0 — 2019-12-02
- 7.2.1 — 2019-11-28
- 7.2.0 — 2019-11-27
- 7.1.4 — 2019-10-30
- 7.1.3 — 2019-10-17
- 7.1.2 — 2019-10-17
- 7.1.1 — 2019-10-12
- 7.1.0 — 2019-10-12
- 7.0.0 — 2019-10-12
- … 18 more at https://npm.io/package/@radic/webpacker/versions

## README

Webpacker
=========

- extends [`webpack-chain`](#)
- Adds helper functions
- Provides blocks
- Installs missing dependencies
- Includes many type definitions


### extends [`webpack-chain`](#)

```ts
import Chain from 'webpack-chain'
export class Webpacker extends Chain {
    constructor(options){}
}
```


### Adds helper functions
```ts
const wp = new Webpacker({})
wp.isDev
wp.isProd
wp.isHot
wp.isServer
wp.ensureLink(src,dest)
wp.extendConfig(config => {
    config.plugins.push(new SomePlugin())
}
wp.$on
wp.$once
wp.$off
wp.$emit
wp.beforeStart(() => console.log('starting'))
wp.beforeExit(() => console.log('starting'))

```


### Provides blocks
```ts
const wp = new Webpacker({})
const {rules,plugins} = wp.blocks

rules.css(wp);
rules.scss(wp, {
    scss: {
        implementation: require('sass')
    }
});
rules.stylus(wp);
rules.images(wp);
rules.fonts(wp);
rules.vue(wp);
rules.pug(wp);

wp.module.rule('babel').test(/\.(js|mjs|jsx)$/).exclude.add(/node_modules/);
wp.module.rule('typescript').test(/\.(ts|tsx)$/).exclude.add(/node_modules/);

rules.babel(wp,{},'babel');

rules.cache(wp, {}, 'typescript')
rules.thread(wp, {}, 'typescript')
rules.babel(wp, {}, 'typescript');
rules.typescript(wp, {
    appendTsSuffixTo    : [ /.vue$/ ],
    configFile          : 'tsconfig.json',
    transpileOnly       : true,
    experimentalWatchApi: true,
    happyPackMode       : true,
    compilerOptions     : {
        target        : 'es5' as any,
        module        : 'esnext' as any,
        importHelpers : true,
        sourceMap     : wp.isDev,
        removeComments: wp.isProd
    }
});


plugins.friendlyErrors(wp);
plugins.bar(wp);
plugins.bundleAnalyzer(wp, {
    reportFilename: resolve(__dirname, 'bundle-analyzer.html')
});
plugins.vueLoader(wp);
plugins.define(wp, {
    DEV          : wp.isDev,
    PROD         : wp.isProd,
    HOT          : wp.isHot,
    ENV          : process.env.NODE_ENV,
    'process.env': {
        NODE_ENV: `"#{process.env.NODE_ENV}"`
    }
});
```

### Installs missing dependencies
```json
{
    "scripts": {
        "build": "webpack --config webpack.config.ts"
    },
    "devDependencies": {
        "@radic/webpacker": "*",
        "webpack": "*",
        "webpack-cli": "*",
        "webpack-dev-server": "*"
    }
}
```

```ts
import {Webpacker} from '@radic/webpacker'
const wp = new Webpacker({})

wp.blocks.rules.scss(wp)

export default wp.toConfig()
```

```bash
$ yarn build
- webpacker installing missing dependencies: file-loader, style-loader, sass-loader, node-sass
...
```


### Includes many type definitions
Code completion for all blocks (plugins,helpers,etc) like file-loader, rules.scss, rules.css, plugins.bar,

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