# webpack-create-config

> A tool for creating webpack config

Latest version **1.0.0** (published 2017-10-08) · ISC license · 0 weekly downloads

## Install

```sh
npm install webpack-create-config
pnpm add webpack-create-config
yarn add webpack-create-config
bun add webpack-create-config
```

Provides the command `webpack-create-config`.

## 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.0 |
| Published | 2017-10-08 |
| First published | 2017-10-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Alexandru Cambose |
| Maintainers | alexcambose |
| Keywords | webpack, cli, config, create, server, bundle |

## Links

- npm: https://www.npmjs.com/package/webpack-create-config
- Repository: https://github.com/alexcambose/webpack-create-config
- Homepage: https://github.com/alexcambose/webpack-create-config#readme
- Issues: https://github.com/alexcambose/webpack-create-config/issues
- npm.io page: https://npm.io/package/webpack-create-config

## Dependencies (3)

- [colors](https://npm.io/package/colors.md) ^1.1.2
- [commander](https://npm.io/package/commander.md) ^2.11.0
- [object-plain-string](https://npm.io/package/object-plain-string.md) ^1.0.4

## Alternatives

- [jsforce](https://npm.io/package/jsforce.md) — 851.2K weekly downloads
- [react-native-qrcode-svg](https://npm.io/package/react-native-qrcode-svg.md) — 693.5K weekly downloads
- [@salesforce/plugin-data](https://npm.io/package/@salesforce/plugin-data.md) — 394.9K weekly downloads
- [@backstage/plugin-search-common](https://npm.io/package/@backstage/plugin-search-common.md) — 308.5K weekly downloads
- [@chain-registry/types](https://npm.io/package/@chain-registry/types.md) — 38.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2017-10-08

## README

# webpack-create-config
Command line tool for creating webpack config files
## Installation
You need to install `webpack-create-config` globally
```
$ npm i -g webpack-create-config
```
Now you can run CLI using following command anywhere
```
$ webpack-create-config
```
## Options
```
  Usage: webpack-create-config [options]


  Options:

    -V, --version              output the version number
    -e, --entry <filename>     Entry point/points to build your project
    -o, --output <filename>    The output filename path
    -c, --context [directory]  The base directory
    -d, --devtool [style]      Enhance the debugging process by adding source maps
    -l, --loaders [loaders]    Add loaders
    -s, --devserver            Add webpack-dev-server
    -w, --watch                Watch files and recompile whenever they change
    -a, --autoinstall          Automatically install required dependencies
    -h, --help                 output usage information
```
## Table of contents
* [Entry](#entry)
* [Output](#output)
* [Context](#context)
* [Devtool](#devtool)
* [Loaders](#loaders)
* [DevServer](#devserver)
* [Watch](#watch)
* [Autoinstall](#autoinstall)

### Entry
[official docs](https://webpack.js.org/configuration/entry-context/#entry)

`-e, --entry` **required**


Single file
```bash
$ webpack-create-config --entry ./src/index.js
```
```
$ webpack-create-config -e ./main.js
```
in `webpack.config.js`
```
entry: {
    index: './src/index.js',
    index2: './src/index2.js',
}
```
Multiple files
```
$ webpack-create-config --entry ./src/index.js,./src/index2.js
```
```
$ webpack-create-config -e ./src/index.js,./src/index2.js
```
`webpack.config.js`
```
entry: {
    index: './src/index.js',
    index2: './src/index2.js',
}
```

### Output
[official docs](https://webpack.js.org/configuration/entry-context/#output)

`-o, --output` **required**

```
$ webpack-create-config --output ./dist/bundle.js
```
```
$ webpack-create-config -o ./dist/bundle.js
```
in `webpack.config.js`
```
output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, './dist'),
},
```
### Context
[official docs](https://webpack.js.org/configuration/entry-context/#context)

`-c, --context` *optional*

```
$ webpack-create-config --context app
```
```
$ webpack-create-config -c app
```
in `webpack.config.js`
```
...
context: path.resolve(__dirname, 'app'),
...
```

### Devtool

[official docs](https://webpack.js.org/configuration/devtool/#devtool)

`-d, --devtool` *optional*

```
$ webpack-create-config  ... --devtool cheap-eval-source-map ...
```
```
$ webpack-create-config ... -d cheap-eval-source-map ...
```
in `webpack.config.js`
```
...
devtool: 'cheap-eval-source-map',
...
```

### Loaders
[official docs](https://webpack.js.org/concepts/loaders/)

`-d, --devtool` *optional*

```
$ webpack-create-config  ... --loaders css,babel-es6 ...
```
```
$ webpack-create-config ... -l css,babel-es6 ...
```
in `webpack.config.js`
```
...
module: {
    rules: [{
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
            options: {
                presets: ['es2015',],
            },
        },
    },{
        test: /\.css$/,
        use: ['style-loader','css-loader',],
    },],
},
...
```
List of avaliable loaders you can add using the CLI

**css** - [css-loader](https://github.com/webpack-contrib/css-loader)

**less** - [less-loader](https://github.com/webpack-contrib/less-loader)

**sass** - [sass-loader](https://github.com/webpack-contrib/sass-loader)

**json** - [json-loader](https://github.com/webpack-contrib/json-loader)

**coffee** - [coffee-loader](https://github.com/webpack-contrib/coffee-loader)

**file** - [file-loader](https://github.com/webpack-contrib/file-loader)

**url** - [url-loader](https://github.com/webpack-contrib/url-loader)

**raw** - [raw-loader](https://github.com/webpack-contrib/raw-loader)

**html** - [html-loader](https://github.com/webpack-contrib/html-loader)

**json5** - [json5-loader](https://github.com/webpack-contrib/json5-loader)

**yaml** - [yaml-loader](https://github.com/webpack-contrib/yaml-frontmatter-loader)

**img** - [img-loader](https://github.com/thetalecrafter/img-loader)

*you may add more loaders later by manually editing the `webpack.config.js` file*

### DevServer
[official docs](https://webpack.js.org/configuration/dev-server/#devserver)
```
$ webpack-create-config ... -d ...
```
```
$ webpack-create-config ... --devserver ...
```
in `webpack.config.js`
```
...
devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
},
...
```
also adds [webpack-dev-server](https://github.com/webpack/webpack-dev-server) as a dependency


### Watch
[official docs](https://webpack.js.org/configuration/watch/)
```
$ webpack-create-config ... -w ...
```
```
$ webpack-create-config ... --watch ...
```
in `webpack.config.js`
```
...
watch: true,
watchOptions: {
    ignored: /node_modules/,
},
...
```

### Autoinstall
```
$ webpack-create-config ... -a ...
```
```
$ webpack-create-config ... --autoinstall ...
```
Automatically install all required dependecies (ex: webpack, file-loader, style-loader) with `npm install` (ex: `npm install -S webpack file-loader style-loader`)

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