# webpack-dev-plugin-ng

> Webpack dev plugin ng

Latest version **0.1.7** (published 2016-10-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install webpack-dev-plugin-ng
pnpm add webpack-dev-plugin-ng
yarn add webpack-dev-plugin-ng
bun add webpack-dev-plugin-ng
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2016-10-19 |
| First published | 2016-09-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Known vulnerabilities | 0 |
| Install scripts | yes |
| GitHub stars | 0 |
| Author | Stefan Zerkalica |
| Maintainers | zerkalica |
| Keywords | webpack-dev-plugin-ng, hapi, hot, live, webpack |

## Links

- npm: https://www.npmjs.com/package/webpack-dev-plugin-ng
- Repository: https://github.com/zerkalica/webpack-dev-plugin-ng
- Homepage: https://github.com/zerkalica/webpack-dev-plugin-ng#readme
- Issues: https://github.com/zerkalica/webpack-dev-plugin-ng/issues
- npm.io page: https://npm.io/package/webpack-dev-plugin-ng

## Dependencies (7)

- [boom](https://npm.io/package/boom.md) >= ^2.0.0
- [mime](https://npm.io/package/mime.md) ^1.3.4
- [find-root](https://npm.io/package/find-root.md) ^1.0.0
- [memory-fs](https://npm.io/package/memory-fs.md) ^0.3.0
- [socket.io](https://npm.io/package/socket.io.md) ^1.5.0
- [strip-ansi](https://npm.io/package/strip-ansi.md) ^3.0.1
- [socket.io-client](https://npm.io/package/socket.io-client.md) ^1.5.0

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

- 0.1.7 (latest) — 2016-10-19
- 0.1.6 — 2016-10-06
- 0.1.5 — 2016-10-06
- 0.1.4 — 2016-09-26
- 0.1.3 — 2016-09-22
- 0.1.2 — 2016-09-21
- 0.1.1 — 2016-09-21
- 0.1.0 — 2016-09-21

## README

# webpack-dev-plugin-ng

Webpack dev plugin with hot-reloading for hapi.

Example dev server deps:

```bash
npm install --save-dev hapi vision inert handlebars webpack webpack-dev-plugin-ng find-root copy-webpack-plugin empty webpack-stats-plugin source-map json-loader babel-loader node-config-loader style-loader stack-source-map boom
```

Example dev server:

```js
import path from 'path'

import {Server} from 'hapi'

import Vision from 'vision'
import Inert from 'inert'
import handlebars from 'handlebars'
import Boom from 'boom'

import {createHapiWebpackPlugin, createDevView} from 'webpack-dev-plugin-ng/hapi'
import webpack from 'webpack'

import config from './webpack.config'

const server = new Server()

const templatePath = path.resolve(__dirname, 'index.html')
const staticPagesMask = new RegExp('^/(index|confirm|wait)?(\.html)?$', 'g')

server.register(
  [
    Vision,
    Inert,
    createHapiWebpackPlugin({
      config,
      webpack,
      hot: true,
      devView: createDevView({staticPagesMask, templatePath})
    })
  ], (err?: Error) => {
    server.views({
      allowAbsolutePaths: true,
      compileOptions: {
          noEscape: true
      },
      engines: {
          html: handlebars
      }
    })
  }
)
```


Example html template:

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>dev app</title>
  </head>
  <body>
    <div id="app"></div>
    <script>
      window.PostData = {{payload}}
    </script>
    <script src="/app.js"></script>
  </body>
</html>
```

Example webpack.config:

```js

import path from 'path'
import fr from 'find-root'

import {
    DefinePlugin,
    NormalModuleReplacementPlugin,
    optimize
} from 'webpack'
import CopyPlugin from 'copy-webpack-plugin'
import {StatsWriterPlugin} from 'webpack-stats-plugin'

const debugStubPath: string = require.resolve('empty/functionThatReturns')
const root = fr(__dirname)
const {version, name} = require(path.resolve(root, 'package.json'))

const isProduction: boolean = process.env.NODE_ENV === 'production'

const styleOptions: string [] = [
    'singleton'
]

const cssOptions: string[] = [
    'autoprefixer',
    (isProduction ? '-' : '') + 'sourceMap',
    (isProduction ? '' : '-') + 'minimize'
]

const fallback = []
if (process.env.NVM_PATH) {
    fallback.push(path.resolve(process.env.NVM_PATH, '..', 'node_modules'))
}
fallback.push(path.resolve(root, 'node_modules'))

function createStyleLoaders(...args: any[]): string[] {
    const styleLoader = 'style?' + styleOptions.join('&')
    const cssLoader = 'css?' + cssOptions.join('&')
    return [styleLoader, cssLoader].concat(args)
}

const main: string = 'app.js'

const commonEntries = isProduction
    ? []
    : [
        'stack-source-map/register'
    ]

export default {
    cwd: root,
    cache: !isProduction,
    debug: !isProduction,
    devtool: isProduction ? '' : 'source-map',
    resolve: {
        fallback
    },
    resolveLoader: {
        fallback
    },
    output: {
        publicPath: '/',
        path: path.resolve(root, 'dist'),
        filename: main
    },
    entry: {
        'browser': commonEntries.concat([
            path.resolve(root, 'src', 'browser.js')
        ])
    },
    configLoader: {
        env: process.env.NODE_ENV === 'production' ? 'prod' : 'dev',
        instance: process.env.PROFILE || 'client'
    },
    module: {
        preLoaders: [
            {
                test: /\.js$/,
                exclude: ['src', 'lib'],
                loaders: ['source-map']
            }
        ],
        loaders: [
            {
                test: /.*\.configloaderrc$/,
                loader: 'node-config-loader/webpack'
            },
            {
                test: /\.json$/,
                loaders: ['json-loader']
            },
            {
                test: /\.(?:jsx?|es6)$/,
                include: /(?:src)/,
                exclude: /(?:node_modules|bower_components)/,
                loaders: ['babel-loader'] // 'react-hot-loader'
            },
            {
                test: /\.(?:png|jpg|gif|ico)$/,
                loader: 'file?name=assets/[name].[ext]'
            },
            {
                test: /\.(?:eot|woff|woff2|ttf|svg)(?:\?v\=[\d\w\.]+)?$/,
                loader: 'file?name=assets/[name].[ext]'
            },
            {
                test: /\.styl$/,
                include: /(?:assets)/,
                loaders: createStyleLoaders('stylus')
            },
            {
                test: /\.css$/,
                include: /(?:assets)/,
                loaders: createStyleLoaders()
            }
        ]
    },
    plugins: [
        new StatsWriterPlugin({
            filename: 'build.json',
            transform: (meta, opts) => JSON.stringify({name, version, main, ...meta}, null, '  '),
            fields: ['hash', 'errors', 'warnings', 'assets']
        }),
        new DefinePlugin({
            'process.env': {
                __VERSION__: JSON.stringify(version),
                IS_BROWSER: true,
                NODE_ENV: JSON.stringify(process.env.NODE_ENV)
            }
        }),
        new CopyPlugin([
            {
                from: path.join(root, 'assets', '*'),
                to: 'assets'
            }
        ])
    ]
    .concat(isProduction
        ? [
            new optimize.DedupePlugin(),
            new optimize.OccurenceOrderPlugin(),
            new optimize.UglifyJsPlugin({
                compress: {
                    warnings: false
                }
            }),
            new NormalModuleReplacementPlugin(/^debug$/, debugStubPath)
        ]
        : [
        ]
    )
}
```

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