Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/alexcambose/webpack-create-config

CLI tool for creating webpack config files
https://github.com/alexcambose/webpack-create-config

bundle cli config configuration create es6 generator loaders webpack webpack-dev-server webpack2

Last synced: about 2 months ago
JSON representation

CLI tool for creating webpack config files

Awesome Lists containing this project

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      Entry point/points to build your project

    -o, --output     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`)