Honeypack is a combination of webpack-dev-server and webpack-dev-middleware, which provides full featured and scalable configuration to bundle assets.
npm i honeypack --save [-g]
With -g, honeypack will be installed globally.
hoenypack
>
Usage: honeypack [options] [command]
Options:
-V, --version output the version number
-h, --help output usage information
Commands:
start Start a dev server
build Build the app for production
help [cmd] display help for [cmd]
hoenypack start
>
Usage: honeypack-start [options]
Options:
-p, --port [port] Specify a port number to listen on
-c, --config [config] Path to the app config file, default is webpack.config.js
-h, --help output usage information
hoenypack build
>
Usage: honeypack-build [options]
Options:
-c, --config [config] Path to the app config file, default is webpack.config.js
-h, --help output usage information
// config.js
middleware: {
hoenypack: {
enable: true,
module: 'hoenypack',
config: {
root: './assets'
}
}
}
-
config
root: relative path to assets directory
Honeypack will automaticly merge app's webpack config if there is a webpack.config.js in your project into default webpack config.
- path to
webpack.config.js- Cli mode: current working directory
- Middleware mode: assets directory
// webpack.config.js
module.exports = {
entry: {
},
output: {
},
module: {
rules: [
/* default rules
test: /\.css$/
test: /\.less$/
test: /\.(png|svg|jpg|gif)$/
test: /\.(woff|woff2|eot|ttf|otf)$/
test: /\.(js|jsx)$/
*/
// we will merge loaders based on test
]
},
plugins: [
],
unPlugins: [
// string, a plugin to remove, e.g. 'UglifyJsPlugin'
]
};
Learn more about webpack config here.
npm install --save-dev webpack-bundle-analyzer
// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
};
Webpack Bundle Analyzer will start at http://127.0.0.1:8888
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent