# dd-webpack-service

> Simple Webpack service for generating Webpack 1.x configuration

Latest version **1.0.20** (published 2016-09-14) · ISC license · 0 weekly downloads

## Install

```sh
npm install dd-webpack-service
pnpm add dd-webpack-service
yarn add dd-webpack-service
bun add dd-webpack-service
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.20 |
| Published | 2016-09-14 |
| First published | 2016-08-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 41 |
| Known vulnerabilities | 0 (+11 in 3 direct dependencies) |
| Install scripts | no |
| Author | DevDigital |
| Maintainers | devdigital |

## Links

- npm: https://www.npmjs.com/package/dd-webpack-service
- Repository: https://github.com/devdigital/dd-webpack-service
- Homepage: https://github.com/devdigital/dd-webpack-service#readme
- Issues: https://github.com/devdigital/dd-webpack-service/issues
- npm.io page: https://npm.io/package/dd-webpack-service

## Dependencies (41)

- [chai](https://npm.io/package/chai.md) ^3.5.0
- [karma](https://npm.io/package/karma.md) ^1.2.0
- [mocha](https://npm.io/package/mocha.md) ^3.0.2
- [eslint](https://npm.io/package/eslint.md) ^3.3.1
- [lodash](https://npm.io/package/lodash.md) ^4.15.0
- [istanbul](https://npm.io/package/istanbul.md) ^0.4.5
- [node-sass](https://npm.io/package/node-sass.md) ^3.8.0
- [stylelint](https://npm.io/package/stylelint.md) ^7.1.0
- [babel-core](https://npm.io/package/babel-core.md) ^6.14.0
- [css-loader](https://npm.io/package/css-loader.md) ^0.24.0
- [karma-chai](https://npm.io/package/karma-chai.md) ^0.1.0
- [json-loader](https://npm.io/package/json-loader.md) ^0.5.4
- [karma-mocha](https://npm.io/package/karma-mocha.md) ^1.1.1
- [sass-loader](https://npm.io/package/sass-loader.md) ^4.0.0
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^6.4.0
- [babel-loader](https://npm.io/package/babel-loader.md) ^6.2.5
- [style-loader](https://npm.io/package/style-loader.md) ^0.13.1
- [eslint-loader](https://npm.io/package/eslint-loader.md) ^1.5.0
- [karma-webpack](https://npm.io/package/karma-webpack.md) ^1.8.0
- [karma-coverage](https://npm.io/package/karma-coverage.md) ^1.1.1
- [postcss-loader](https://npm.io/package/postcss-loader.md) ^0.10.1
- [chai-as-promised](https://npm.io/package/chai-as-promised.md) ^5.3.0
- [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.11.1
- [webpack-dev-server](https://npm.io/package/webpack-dev-server.md) ^1.15.0
- [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.14.0
- [eslint-plugin-react](https://npm.io/package/eslint-plugin-react.md) ^6.1.2
- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^2.22.0
- [babel-preset-stage-0](https://npm.io/package/babel-preset-stage-0.md) ^6.5.0
- [eslint-config-airbnb](https://npm.io/package/eslint-config-airbnb.md) ^10.0.1
- [eslint-plugin-import](https://npm.io/package/eslint-plugin-import.md) ^1.14.0
- [karma-mocha-reporter](https://npm.io/package/karma-mocha-reporter.md) ^2.1.0
- [html-webpack-template](https://npm.io/package/html-webpack-template.md) ^5.1.1
- [karma-chrome-launcher](https://npm.io/package/karma-chrome-launcher.md) ^2.0.0
- [eslint-plugin-jsx-a11y](https://npm.io/package/eslint-plugin-jsx-a11y.md) ^2.1.0
- [karma-chai-as-promised](https://npm.io/package/karma-chai-as-promised.md) ^0.1.2
- [karma-sourcemap-loader](https://npm.io/package/karma-sourcemap-loader.md) ^0.3.7
- [babel-preset-react-hmre](https://npm.io/package/babel-preset-react-hmre.md) ^1.1.1
- [stylelint-webpack-plugin](https://npm.io/package/stylelint-webpack-plugin.md) ^0.3.1
- [babel-plugin-__coverage__](https://npm.io/package/babel-plugin-__coverage__.md) ^11.0.0
- [eslint-friendly-formatter](https://npm.io/package/eslint-friendly-formatter.md) ^2.0.6
- [stylelint-config-standard](https://npm.io/package/stylelint-config-standard.md) ^12.0.0

## Recent versions

- 1.0.20 (latest) — 2016-09-14
- 1.0.19 — 2016-09-07
- 1.0.18 — 2016-09-05
- 1.0.17 — 2016-09-04
- 1.0.16 — 2016-09-02
- 1.0.15 — 2016-09-01
- 1.0.14 — 2016-09-01
- 1.0.13 — 2016-08-31
- 1.0.12 — 2016-08-27
- 1.0.11 — 2016-08-27
- 1.0.10 — 2016-08-26
- 1.0.9 — 2016-08-26
- 1.0.8 — 2016-08-26
- 1.0.6 — 2016-08-26
- 1.0.5 — 2016-08-26
- … 5 more at https://npm.io/package/dd-webpack-service/versions

## README

Simple Webpack service for generating Webpack 1.x configuration

# Getting Started

Ensure you have a `package.json` (`npm init`) and that the required peer dependencies are installed:

```
npm i react react-dom react-hot-loader@3.0.0-beta.2 babel-polyfill --save
npm i webpack --save-dev
```

Install the webpack service:

```
npm i dd-webpack-service --save-dev
```

Create a webpack server file, e.g. `server.js`:

```javascript
var path = require('path')
var webpackService = require('dd-webpack-service').webpackService

var isDevelopment = process.env.NODE_ENV !== 'production'

var config = webpackService.getConfig({
  isDevelopment: isDevelopment,
  entry: path.resolve(__dirname, './src/index.jsx'),
  output: {
    path: path.resolve(__dirname, './public'),
    filename: '[name].js',
  },
  html: {
    title: 'My App',
    appMountId: 'root',
  },
})

webpackService.run(config)
```

Create your application code in the folder referenced by your `path` property set above:

```javascript
// index.jsx
import 'babel-polyfill'
import React from 'react'
import { render } from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import App from './App'

render(
  <AppContainer>
    <App />
  </AppContainer>,
  document.getElementById('root')
)

if (module.hot) {
  module.hot.accept('./App', () => {
    // If you use Webpack 2 in ES modules mode, you can
    // use <App /> here rather than require() a <NextApp />.
    const NextApp = require('./App').default // eslint-disable-line global-require

    render(
      <AppContainer>
        <NextApp />
      </AppContainer>,
      document.getElementById('root')
    )
  })
}

// App.jsx
/* eslint-disable react/prefer-stateless-function */
import React, { Component } from 'react'

class App extends Component {
  render() {
    return (
      <div>
        <p>Test</p>
      </div>
    )
  }
}

export default App
```

Create an `npm start` script to run your `server.js` in `package.json`:

```
"scripts": {
  "start": "node server.js",
  ...
}
```

Navigate to `http://localhost:8080` to view your application with hot module replacement.

> Note if you wish to change the default port from `8080`, then specify a `port` property within the options passed to `webpackService.getConfig`.

# ES6/2015

You can also develop your `server.js` file in ES6/2015 by using `babel-node` within your `package.json` start script. Install the `babel-cli` package to have access to `babel-node`.

```
npm i babel-cli --save-dev
```

```
"scripts": {
  "start": "babel-node --presets es2015,stage-0,react server.js",
  ...
}
```

```javascript
// server.js
import path from 'path'
import { webpackService } from 'dd-webpack-service'

const isDevelopment = process.env.NODE_ENV !== 'production'

const config = webpackService.getConfig({
  isDevelopment,
  entry: path.resolve(__dirname, './src/index.jsx'),
  output: {
    path: path.resolve(__dirname, './public'),
    filename: '[name].js',
  },
  html: {
    title: 'My App',
    appMountId: 'root',
  },
})

webpackService.run(config)
```

## Webpack Production Build

To create a production build, you want to run the following `build` script in your `package.json`:

```
"build": "cross-env NODE_ENV=production webpack",
```

> Note that `cross-env` is an npm package that allows you to set node environment variables cross platform, use `npm i cross-env --save-dev` to have access.

Webpack will need a `webpack.config.js` file in the project root which exports your Webpack configuration object. 

> Note that an alternative to using a `webpack.config.js` file for production builds is to use the Webpack JavaScript API to run Webpack. See the [React Starter Kit](https://github.com/kriasoft/react-starter-kit) source code for an example of this.

If you wish to use ES6 within your webpack config file, then you need to do the following two steps:

1. Call your file `webpack.config.babel.js`
2. Install the `babel-register` npm package (`npm i babel-register --save-dev`)
3. Set babel presets "es2015" (and "stage-0" if you want latest features) either in a `.babelrc` file or within a `babel` section in your `package.json` file

With these in place, you can then seperate out your Webpack options into a separate `webpack.config.babel.js` file:

```javascript
// webpack.config.babel.js
import webpack from 'webpack'
import { webpackService } from 'dd-webpack-service'
import options from './options'
import packages from './package.json'

const isDevelopment = process.env.NODE_ENV !== 'production'

const config = webpackService.getConfig({
  isDevelopment: isDevelopment,
  port: 3000,
  ... other webpack settings here
})

// In production, use separate vendor chunk
// See https://github.com/webpack/webpack/issues/1189
if (!isDevelopment) {
  config.entry = {
    'js/main': options.entry,
    'vendor': Object.keys(packages.dependencies)
  }

  config.plugins.splice(
    1,
    0,
    new webpack.optimize.CommonsChunkPlugin('vendor', 'js/vendor.js')
  )
}

export default config
```

The `server.js` file can then be simplified to:

```javascript
import { webpackService } from 'dd-webpack-service'
import config from './webpack.config.babel'

webpackService.run(config)
```

# Testing

In order to run tests with Webpack, `dd-webpack-service` uses [Karma Webpack](https://github.com/webpack/karma-webpack). Firstly, you can set your `test` scripts within `package.json`:

```
"scripts": {
  ...
  "test": "karma start",
  "test:watch": "npm test -- --auto-watch --no-single-run --reporters progress"
},
```

Next, Karma requires a `karma.config.js` file which exports a function which takes the Karma config to set any Karma related options. Part of these options is a `webpack` section which takes the Webpack configuration. 

`dd-webpack-service` provides a `KarmaService` which can take a webpack configuration object, and the Karma config object, and return a Karma configuration object with sensible defaults. The `dd-webpack-service` WebpackService provides a `getTestConfig` function which provides a sensible Webpack test configuration.

```javascript
// karma.config.js
var webpackService = require('dd-webpack-service').webpackService
var karmaService = require('dd-webpack-service').karmaService
var options = require('./options.js')

module.exports = function setKarmaConfig(config) {
  const webpackConfig = webpackService.getTestConfig(options)
  const karmaConfig = karmaService.getConfig(config, webpackConfig)
  config.set(karmaConfig)
}

// options.js
var path = require('path')

module.exports = {
  entry: path.resolve(__dirname, './demo/index.jsx'),
  output: {
    path: path.resolve(__dirname, './demo'),
    filename: '[name].js',
  },
  html: {
    title: 'My App',
    appMountId: 'root',
  },
}
```

Using a separate ES5 based `options.js` file allows us to share the Webpack configuration options between Karma and our webpack configuration file.

## ES6 / 2015

Currently Karma configuration files [do not yet](https://github.com/karma-runner/karma/issues/1597) support ES6/2015.

However, a workaround is to use `babel-register` within your `karma.conf.js` file before requiring an ES6/2015 based configuration file:

```javascript
// karma.conf.js
require('babel-core/register');
module.exports = require('./karma.conf.babel').default;

// karma.conf.babel.js
import { webpackService, karmaService } from 'dd-webpack-service'
import options from './options'

export default config => {
  const webpackConfig = webpackService.getTestConfig(options)
  const karmaConfig = karmaService.getConfig(config, webpackConfig)
  config.set(karmaConfig)
}
```

> Note that tests should be written in `__tests__` folders and follow the `*-spec.js` naming convention

# Developers

For maintainers of `dd-webpack-service`:

## Initial Setup

```
npm set init.author.name "..."
npm set init.author.email "...@..."
npm set init.author.url "http://..."
npm adduser
```

## Publishing

* Increment version in `package.json`

```
npm run push
```

> Note the `push` script will run the build `npm run build` and then `npm publish` to push the package to the npm registry (https://registry.npmjs.org).

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