zwebpack
从此告别webpack复杂的配置,一键打包。
这个项目是在webpack上做的一层封装,所以你既可以享受webpack带来的便捷,又不需要处理webpack复杂的配置。
安装
npm i zwebpack -D
zwebpack可以全局安装,但是不推荐.
使用方法
安装zwebpack之后,在package.json的scripts中添加打包脚本。
完全零配置,完全自动化
你可以放心的在项目中使用react,es6, less, polyfill等,zwebpack全部帮你集成了。
命令行
以下是你使用 zwebpack --help
打印的使用信息.
Usage: zwebpack [options] Options: -V, --version output the version number --root [root] root context relative to --ay, --analyze Visualize size of webpack output files with an interactive zoomable treemap. --mv, --modifyVars [modifyVars] Enables run-time modification of Less variables. --bp, --babelPolyfill Use babel-polyfill to polyfill your code. --pfx, --prefix [prefix] Add prefix to output filename. -c, --xConfig [xConfig] config file of zwebpack -e, --entry [entry] The entry of zwebpack -p, --path [path] The output path of zwebpack -j, --jsx Entry extension is .jsx -m, --mode [mode] production or development. -a, --alias <alias> Alias
命令
zwebpack [options]
-V, --version
输出当前zwebpack的版本。
-c, --config
指定配置文件。虽然zwebpack的目标是没有配置,但是你你也可以使用配置文件来处理比较复杂的配置。
zwebpack -c zwebpack.config.js
/** * use config file. * * @mode * @entry * @output * @watch * @modifyVars * @analyze * @jsx * @babelPolyfill */moduleexports = entry: 'src/index.js' output: path: path filename: 'bundle.js' jsx: true modifyVars: path alias: 'dengyongqing': path
--root
webpack.resolve.modules, 相对于当前运行目录.
zwebpack --root ..
对应的webpack配置为
resolve: modules: path 'node_modules'
--ay, --analyze
展示可视化的打包信息. https://github.com/webpack-contrib/webpack-bundle-analyzer
--mv, --modifyVars [filePath]
Enables run-time modification of Less variables (Less).
在Less打包的时候使用modifyVars
来进行变量替换。
filePath
可以是一个less文件或者json文件。
比如:
zwebpack -e list --mv ./theme/index.less# or zwebpack -e list --mv ./theme/theme.json
--bp, --babelPolyfill
在打包的时候使用babel-polyfill,如果你在写react应用的话,你可能需要打开这个配置。
--pfx, --prefix [value]
给打包的文件名添加前缀. (默认: '')
# prefix: zh-CN # 生产模式 [hash:6].zh-CN.min.js # 开发模式 zh-CN.min.js
-e, --entry [filename | directory | mixed]
指定zwebpack的入口. (默认: 'bundle=./src/index.js')
打包后的文件需要一个名字,所以entry的格式是这样的 name=filename
.
以下是entry支持的几种形式:
-
文件名
zwebpack -e home=entry/index.js -
目录
你可以直接指定一个目录为入口,zwebpack会自动寻找入口文件
index.js | index.jsx
.比如你的文件目录是这样的:
my-app ├── node_modules ├── package.json └── entry └── index.js
zwebpack -e bundle=entry如果你的文件目录是这样的:
my-app ├── README.md ├── node_modules ├── package.json └── applications ├── about │ └── index.js └── home └── index.js
如果文件目录如上所示,那么你不需要指定name了,
about
和home
会被自动当作打包后的名字。zwebpack -e applications -
混合使用
zwebpack -e home=src/index.js,applications
-p, --path [value]
Default: './dist'
指定zwebpack打包后的输出目录。
-j, --jsx
指定entry的后缀名为jsx, .jsx
.
mode
-m, --modeDefalut: production
- production -- uglify code.
- development -- not uglify code
-a, --alias [alias]
指定webpack.resolve.alias, alias可以是一个json文件或者直接以这样的方式传入moment=client/moment.js
.
zwebpack -e applications -a alias.json
或者这样:
zwebpack -e src -a moment=client/moment.js
-s, --splitChunks
使用splitChunks来进行代码分割. https://webpack.js.org/configuration/optimization/#optimization-splitchunks
-w, --watch
开启监听模式.
-h, --help
输出帮助信息.
LICENSE
MIT © dengyongqing