quick-webpack v0.4.5

Quick-webpack

It is npm package, for using webpack without a difficult configuration. But you can config your loaders, babel plugins and presets, without creation any new files. Only package.json and your code!

###Include hot module replacement:

It import new version of application on any changes and reloading entry file automatically. You don't need to write any code for hot reloading in entry file. It reload your app and clearing console on any changes, like you start application first time.

Install

$ npm install quick-webpack --save-dev

Usage

Add to your package.json file next config:

  "webpack": {
    "entry": "<Relative path to your one entry file>"
  },
  "scripts": {
    "start": "quickstart",
    "build": "quickbuild"
  }

Then start developer server with command:

$ npm start

And open http://localhost:3000/. There you will see server, base on your project root path. Developer bundle will opens on http://localhost:3000/entryFileName.js Include it in any html code and start developing!

Default webpack and babel settings

Loaders:

• babel: For js and jsx files. Your entry file folder resolves as root by default. No "../../" in subfolders.
• style and css: Importing css files.
• json: Also json files
• file: For ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2
• url: For mp4|webm|wav|mp3|m4a|aac|oga

Babel:

• presets: latest
• plugins: transform-object-rest-spread

preLoaders:

• eslint: For js and jsx files.

• Hot module replacement:

It import new version of application on any changes and reloading entry file automatically. You don't need to write any code for hot reloading in entry file. It reload your app and clearing console on any changes, like you start application first time.

Webpack config API

Add to your package.json file object with key "webpack" and config there:

  "webpack": {
    ...
  }

entry

Type: string Default: No default vaule, it is required parameter

Relative (of project root) path to your main javascript file.

outputPath

Type: string Default: build

Relative (of project root) path to build folder.

port

Type: number Default: 3000

Port for developer server.

proxy

Type: object or array

Proxy any target to developer server. For example, for using API:

  "webpack": {
    ...
    "proxy": {
      "/api": {
        "target": "http://localhost:8080/api"
      }
    }
  }

Format the same as webpack-dev-server

loaders

Type: object

Object with loaders. Key is file extension. Value is loaders name. This option not rewrite all loaders, it only adding new loaders.

For example, add loader for import html as string:

$ npm install raw-loader --save-dev

  "webpack": {
    ...
    "loaders": {
      "html": "raw" 
    }
  }

Babel config API

Add to your package.json file object with key "babel" and config there:

  "babel": {
    ...
  }

presets

Type: array

This option not rewrite all presets, it only adding new babel presets. For example, add presets for react:

$ npm install --save-dev babel-preset-react

  "babel": {
    "presets": ["react"]
  }

plugins

Type: array

This option not rewrite all plugins, it only adding new babel plugins.

Build

$ npm run build

Compiled bundle will saved in folder "build" or in folder which you set in outputPath property.

Examples

• Plain es2015 javascript