Webpacker

Easy way to use webpack

Installation

• NPM

  npm i -D @hanreev/webpacker

• Yarn

  yarn add -D @hanreev/webpacker

Configuration

• Run webpacker init command to generate empty configuration

  # NPX
  npx webpacker init
  
  # yarn
  yarn webpacker init

  Add --out options to generate webpacker.config.js into different path

  See configuration example

• Available options:

  | Option | Type | Default | Description | | --------------- | ------------------------------------------------------------------------ | ----------- | ---------------------------------------------------------------------------------------------------------------- | | outputPath | string | '' | Assets output path, can be absolute or relative path | | publicPath | string | '' | URL to public path | | entries | {[destPath: string]: string|string[]} | {} | List of entry files. Destinaton path for glob and array may use [name], [basename] and [ext] placeholder | | splitChunks | Object | {} | See Webpack SplitChunksPlugin options | | runtimeChunck | boolean|'single'|'multiple'|{ name: string } | false | See Webpack runtime chunk option | | providers | Object | {} | See Webpack ProvidePlugin options | | copies | {[destPath: string]: string} | {} | List of files, folders or glob to copy | | sourceMap | boolean|'auto' | 'auto' | Enable/Disable source map | | hashOutput | string|boolean | true | Hash output path. true enables hash output to default location: asset-hash.json | | watchExclude | string[] | [] | List of files, folders and glob string to exclude on watch | | devServer | Object | undefined | See Webpack DevServer options | | webpackConfig | Object | undefined | Override webpack configuration. See Webpack configuration |

Usage

• NPX

  npx webpacker <command> [options]
  
  # To see available commands and options, run:
  npx webpacker --help

• Yarn

  yarn webpacker <command> [options]
  
  # To see available commands and options, run:
  yarn webpacker --help

Help Output

Usage: webpacker <command> [options]

Commands:
  webpacker production   Compile assets for production [default] [aliases: prod]
  webpacker development  Compile assets for development           [aliases: dev]
  webpacker watch        Compile assets for production
  webpacker server       Compile assets and start dev server
  webpacker init         Generate webpacker configuration

Options:
  --help, -h         Show help                                         [boolean]
  --version, -v      Show version number                               [boolean]
  --config, -c       Webpacker config path                              [string]
                                                [default: "webpacker.config.js"]
  --merge, -m        Merge with provided webpack config                 [string]
  --progress, -p     Print compilation progress in percentage          [boolean]
  --color, --colors  Enables/Disables colors on the console            [boolean]
                                                                 [default: true]
  --json, -j         Prints the result as JSON.                        [boolean]