Packing
基于webpack的前端集成开发环境和编译环境
特点
- 不依赖 host 文件,根据环境自动切换资源路径
- 节约开发服务器,多分支开发部署到同一台服务器不会相互覆盖
- 提供资源包体积分析报告
- Version>=4.0支持babel 7。
Install
- 安装
yo
和generator-packing
npm install -g yo generator-packing
- 生成你的网站
yo packing
- 启动开发模式
npm run serve
-
在浏览器中预览网站
http://localhost:8081
-
其他命令
# 编译工程 npm run build # 不同环境下编译工程 npm run build:devnpm run build:betanpm run build:prod # 编译并预览编译结果,端口8080 npm run serve:dist # 启动不带webpack-dashboard的开发环境 npm run serve:normal # 启动时自动打开浏览器功能 npm run serve -- --opennpm run serve -- -o # 启动时强制清除DLL缓存功能 npm run serve -- --cleannpm run serve -- -c
Directory
.
├── /bin/
│ ├── /packing-build.js
│ ├── /packing-serve:dist.js
│ ├── /packing-serve.js
│ └── /packing.js
├── /config/
│ ├── /packing.js # 构建工具相关配置
│ ├── /webpack.build.babel.js # webpack编译环境配置文件
│ ├── /webpack.dll.babel.js # DllPlugin插件编译配置
│ └── /webpack.serve:dist.js # webpack预览编译后结果的配置文件
├── /examples/ # 例子
├── /src/ # 项目代码容器目录
├── /util/ # util
├── .babelrc # babel配置
├── .eslintrc.js # eslint配置
├── package.json
└── README.md
例子
- build-library
演示输出一个工具类库 - common-chunks
演示将共用代码打包成common包 - custom-page-master
演示自定义网页母模版 - custom-page-title
演示自定义网页标题、关键字、网页描述等信息 - mock-ajax
演示模拟异步请求 - mock-graphql
演示模拟GraphQL服务 - mock-page-context-global
演示模拟公用的模版数据 - mock-page-context-promise
演示模拟从其他服务获取模版数据 - remove-default-plugin
演示删除packing默认配置