vpack

Dev tool for running Webpack dev server and builds at vigour.io.

install it

npm i -g vpack or npm i --save vpack

commands

run

default command (vpack or vpack run): Starts a webpack-dev-server on the current directory.

options

• ./path/to/entry.js entry point (defaults to ./index.js)
• -p --port port to run dev-server (defaults to a randon port)
• -o --open open the server in the default browser (http://localhost:${port}/webpack-dev-server/index.html)
• -c ./path/to/webpack.config.js --config path to specific webpack config file (this will be merged with the default values on vpack config. Check custom-config section for more info about what is merged)
• --package includes DefinePlugin exposing package.json as an object on global.VIGOUR_CONFIG
• --template ./path/to/template.html path to template html in which all bundles and css will be inject when running in browser (defaults to ./template.html)
• --no-common-plugin removes webpack.optimize.CommonsChunkPlugin that is inserted by default
• --ignore-babel removes default loader for js
• --public-path changes the default / public path. You can set it to false so it's considered as empty '' public path.
• --devtool -d devtool to be used for source maps. Defaults to cheap-module-source-map. More info here

bundle|build

vpack bundle vpack build run webpack and generates the bundle in the output path folder. This options removes all configuration related to webpack-dev-server and hot module replacement.

options

• ./path/to/entry.js entry point (defaults to ./index.js)
• --output | --output-path ./path/ path to where bundled files will be stored (defaults to build)
• --template ./path/to/template.html path to template html in which all bundles and css will be inject when running in browser (defaults to ./template.html)
• --hashes include hashes in all generated bundle files (css and js) for long term caching. This is already injected in the bundle reference in index.html.
• --ignore-babel removes default loader for js
• --no-common-plugin removes webpack.optimize.CommonsChunkPlugin that is inserted by default
• --public-path changes the default / public path. You can set it to false so it's considered as empty '' public path.
• -p --production add plugins for performance, uglify, etc.
  • plugins added:
  • webpack.optimize.UglifyJsPlugin
  • webpack.optimize.OccurenceOrderPlugin
  • webpack.optimize.DedupePlugin

custom-config

-c ./path/to/webpack.config.js allows you to override some default configuration files. If you want to specify the entry point, for example, you can create your config with the following content:

module.exports = {
  entry: './custom_entry.js'
}

override/include loaders

it will merge loaders based on the test property (must be a string, e.g.: test: /\.less$/). If it can't find this test loader, it will be included as a new one.

module.exports = {
  module: {
    loaders: [
      {
        test: /\.scss$/,
        loaders: ['style', 'css?sourceMap', 'sass?sourceMap']
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('[hash].bundle.css', {
      allChunks: true
    })
  ]
}

add plugins

var AwesomePlugin = require('awesome-plugin')

module.exports = {
  plugins: [
    new AwesomePlugin()
  ]
}

default-settings

• devtool: 'cheap-module-source-map' (merges with the custom webpack config file)
• entry an array of entries wich merges with the custom webpack config file. By default it includes webpack/hot/dev-server and webpack-dev-server/client?http://localhost:${port}/ (Hot is enabled by default)
• module.loaders are also merged. The default loaders are less and babel with es2015 preset

loaders

You can specify custom loaders in the webpack config file. They will be merged. Below, the list of current default module loaders.

test: /\.less$/,
loader: 'style!css!less?strictMath'

test: /\.js$/,
loader: 'babel',
query: {
  presets: [
    require.resolve('babel-preset-es2015')
  ]
}