从此告别webpack复杂的配置,一键打包。
这个项目是在webpack上做的一层封装,所以你既可以享受webpack带来的便捷,又不需要处理webpack复杂的配置。
npm i zwebpack -D
zwebpack可以全局安装,但是不推荐.
安装zwebpack之后,在package.json的scripts中添加打包脚本。
{
"scripts": {
"build": "zwebpack -e src"
}
}
完全零配置,完全自动化
你可以放心的在项目中使用react,es6, less, polyfill等,zwebpack全部帮你集成了。
以下是你使用 zwebpack --help
打印的使用信息.
Usage: zwebpack [options]
Options:
-V, --version output the version number
--root [root] root context relative to process.cwd()
--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. (default: )
-c, --xConfig [xConfig] config file of zwebpack
-e, --entry [entry] The entry of zwebpack (default: ./src/index.js)
-p, --path [path] The output path of zwebpack (default: ./dist)
-j, --jsx Entry extension is .jsx
-m, --mode [mode] production or development. (default: production)
-a, --alias <alias> Alias for webpack resolve. (A json file | name=path,name=path)
-s, --splitChunks https://webpack.js.org/plugins/split-chunks-plugin/
-w, --watch Turn on watch mode.
-h, --help output usage information
zwebpack [options]
输出当前zwebpack的版本。
指定配置文件。虽然zwebpack的目标是没有配置,但是你你也可以使用配置文件来处理比较复杂的配置。
zwebpack -c zwebpack.config.js
/**
* use config file.
*
* @mode
* @entry
* @output
* @watch
* @modifyVars
* @analyze
* @jsx
* @babelPolyfill
*/
module.exports = {
entry: 'src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
jsx: true,
modifyVars: path.resolve(__dirname, 'theme', 'index.less'),
alias: {
'dengyongqing': path.resolve(__dirname, 'alias/dengyongqing.js')
}
}
webpack.resolve.modules, 相对于当前运行目录.
zwebpack --root ..
对应的webpack配置为
{
resolve: {
modules: [path.resolve(process.cwd(), '..'), 'node_modules']
}
}
展示可视化的打包信息. https://github.com/webpack-contrib/webpack-bundle-analyzer
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
在打包的时候使用babel-polyfill,如果你在写react应用的话,你可能需要打开这个配置。
给打包的文件名添加前缀. (默认: '')
# prefix: zh-CN
# 生产模式
[hash:6].zh-CN.min.js
# 开发模式
zh-CN.min.js
指定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
Default: './dist'
指定zwebpack打包后的输出目录。
指定entry的后缀名为jsx, .jsx
.
Defalut: production
- production -- uglify code.
- development -- not uglify code
指定webpack.resolve.alias, alias可以是一个json文件或者直接以这样的方式传入moment=client/moment.js
.
{
"moment": "client/lib/monent.js"
}
zwebpack -e applications -a alias.json
或者这样:
zwebpack -e src -a moment=client/moment.js
使用splitChunks来进行代码分割. https://webpack.js.org/configuration/optimization/#optimization-splitchunks
开启监听模式.
输出帮助信息.
MIT © dengyongqing