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
• Output
• Context
• Devtool
• Loaders
• DevServer
• Watch
• Autoinstall

Entry

official docs

-e, --entry required

Single file

$ 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

-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

-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

-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

-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

less - less-loader

sass - sass-loader

json - json-loader

coffee - coffee-loader

file - file-loader

url - url-loader

raw - raw-loader

html - html-loader

json5 - json5-loader

yaml - yaml-loader

img - img-loader

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

DevServer

official docs

$ 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 as a dependency

Watch

official docs

$ 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)