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 onvpack
config. Check custom-config section for more info about what is merged)--package
includesDefinePlugin
exposingpackage.json
as an object onglobal.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 forjs
--public-path
changes the default/
public path. You can set it tofalse
so it's considered as empty''
public path.--devtool
-d
devtool to be used for source maps. Defaults tocheap-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 tobuild
)--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 inindex.html
.--ignore-babel
removes default loader forjs
--no-common-plugin
removeswebpack.optimize.CommonsChunkPlugin
that is inserted by default--public-path
changes the default/
public path. You can set it tofalse
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 = moduleexports = plugins:
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 includeswebpack/hot/dev-server
andwebpack-dev-server/client?http://localhost:${port}/
(Hot
is enabled by default)module.loaders
are also merged. The default loaders areless
andbabel
withes2015
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')
]
}