# packing > A webpack based web front-end development environment Latest version **7.0.2** (published 2020-10-20) · MIT license · 0 weekly downloads ## Install ```sh npm install packing pnpm add packing yarn add packing bun add packing ``` Provides the commands `packing`, `packing-dll`, `packing-build`, `packing-serve`, `packing-serve-dist`. ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 7.0.2 | | Published | 2020-10-20 | | First published | 2016-06-28 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Node | >=10 | | Dependencies | 54 | | Unpacked size | 113.7 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 34 | | Author | zhongzhi | | Maintainers | luehoin, zhongzhi, johnch | | Keywords | packing, webpack | ## Links - npm: https://www.npmjs.com/package/packing - Repository: https://github.com/packingjs/packing - Homepage: https://github.com/packingjs/packing#readme - Issues: https://github.com/packingjs/packing/issues - npm.io page: https://npm.io/package/packing ## Dependencies (54) - [chalk](https://npm.io/package/chalk.md) ^4.1.0 - [dotenv](https://npm.io/package/dotenv.md) ^8.2.0 - [mkdirp](https://npm.io/package/mkdirp.md) ^1.0.4 - [rimraf](https://npm.io/package/rimraf.md) ^3.0.2 - [core-js](https://npm.io/package/core-js.md) ^3.6.5 - [cssnano](https://npm.io/package/cssnano.md) ^4.1.10 - [webpack](https://npm.io/package/webpack.md) ^5.1.2 - [inquirer](https://npm.io/package/inquirer.md) ^7.3.3 - [commander](https://npm.io/package/commander.md) ^6.1.0 - [stylelint](https://npm.io/package/stylelint.md) ^13.7.2 - [@babel/cli](https://npm.io/package/@babel/cli.md) ^7.12.1 - [css-loader](https://npm.io/package/css-loader.md) ^5.0.0 - [url-loader](https://npm.io/package/url-loader.md) ^4.1.1 - [@babel/core](https://npm.io/package/@babel/core.md) ^7.12.1 - [@babel/node](https://npm.io/package/@babel/node.md) ^7.12.1 - [cli-spinner](https://npm.io/package/cli-spinner.md) ^0.2.10 - [file-loader](https://npm.io/package/file-loader.md) ^6.1.1 - [autoprefixer](https://npm.io/package/autoprefixer.md) ^10.0.1 - [babel-loader](https://npm.io/package/babel-loader.md) ^8.1.0 - [import-fresh](https://npm.io/package/import-fresh.md) ^3.2.1 - [loader-utils](https://npm.io/package/loader-utils.md) ^2.0.0 - [packing-glob](https://npm.io/package/packing-glob.md) ^1.0.1 - [style-loader](https://npm.io/package/style-loader.md) ^2.0.0 - [eslint-loader](https://npm.io/package/eslint-loader.md) ^4.0.2 - [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.12.1 - [postcss-loader](https://npm.io/package/postcss-loader.md) ^4.0.4 - [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.12.1 - [@babel/preset-react](https://npm.io/package/@babel/preset-react.md) ^7.12.1 - [eslint-config-qunar](https://npm.io/package/eslint-config-qunar.md) ^7.1.0 - [clean-webpack-plugin](https://npm.io/package/clean-webpack-plugin.md) ^3.0.0 - [webpack-pwa-manifest](https://npm.io/package/webpack-pwa-manifest.md) ^4.2.0 - [terser-webpack-plugin](https://npm.io/package/terser-webpack-plugin.md) ^5.0.0 - [mini-css-extract-plugin](https://npm.io/package/mini-css-extract-plugin.md) ^1.0.0 - [webpack-bundle-analyzer](https://npm.io/package/webpack-bundle-analyzer.md) ^3.9.0 - [stylelint-webpack-plugin](https://npm.io/package/stylelint-webpack-plugin.md) ^2.1.1 - [stylelint-config-standard](https://npm.io/package/stylelint-config-standard.md) ^20.0.0 - [@babel/plugin-transform-runtime](https://npm.io/package/@babel/plugin-transform-runtime.md) ^7.12.1 - [babel-plugin-add-module-exports](https://npm.io/package/babel-plugin-add-module-exports.md) ^1.0.4 - [@babel/plugin-syntax-import-meta](https://npm.io/package/@babel/plugin-syntax-import-meta.md) ^7.10.4 - [@babel/plugin-proposal-decorators](https://npm.io/package/@babel/plugin-proposal-decorators.md) ^7.12.1 - [@babel/plugin-proposal-json-strings](https://npm.io/package/@babel/plugin-proposal-json-strings.md) ^7.12.1 - [@babel/plugin-syntax-dynamic-import](https://npm.io/package/@babel/plugin-syntax-dynamic-import.md) ^7.8.3 - [@babel/plugin-proposal-function-bind](https://npm.io/package/@babel/plugin-proposal-function-bind.md) ^7.12.1 - [@babel/plugin-proposal-function-sent](https://npm.io/package/@babel/plugin-proposal-function-sent.md) ^7.12.1 - [@babel/plugin-proposal-do-expressions](https://npm.io/package/@babel/plugin-proposal-do-expressions.md) ^7.12.1 - [@babel/plugin-proposal-class-properties](https://npm.io/package/@babel/plugin-proposal-class-properties.md) ^7.12.1 - [@babel/plugin-proposal-numeric-separator](https://npm.io/package/@babel/plugin-proposal-numeric-separator.md) ^7.12.1 - [@babel/plugin-proposal-optional-chaining](https://npm.io/package/@babel/plugin-proposal-optional-chaining.md) ^7.12.1 - [@babel/plugin-proposal-pipeline-operator](https://npm.io/package/@babel/plugin-proposal-pipeline-operator.md) ^7.12.1 - [@babel/plugin-proposal-throw-expressions](https://npm.io/package/@babel/plugin-proposal-throw-expressions.md) ^7.12.1 - [@babel/plugin-proposal-export-default-from](https://npm.io/package/@babel/plugin-proposal-export-default-from.md) ^7.12.1 - [@babel/plugin-proposal-export-namespace-from](https://npm.io/package/@babel/plugin-proposal-export-namespace-from.md) ^7.12.1 - [@babel/plugin-proposal-nullish-coalescing-operator](https://npm.io/package/@babel/plugin-proposal-nullish-coalescing-operator.md) ^7.12.1 - [@babel/plugin-proposal-logical-assignment-operators](https://npm.io/package/@babel/plugin-proposal-logical-assignment-operators.md) ^7.12.1 ## Alternatives - [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads - [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads - [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads - [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads - [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads ## Recent versions - 7.0.2 (latest) — 2020-10-20 - 7.0.1 — 2020-10-16 - 7.0.1-alpha.4 — 2020-10-16 - 7.0.1-alpha.3 — 2020-10-16 - 7.0.1-alpha.2 — 2020-10-16 - 7.0.1-alpha.1 — 2020-10-16 - 7.0.1-alpha.0 — 2020-10-15 - 6.3.1 — 2020-05-12 - 6.3.0 — 2020-04-10 - 6.2.0 — 2020-04-09 - 6.1.5 — 2020-03-12 - 6.1.4 — 2020-03-12 - 6.1.3 — 2020-03-12 - 6.1.2 — 2020-02-11 - 6.1.1 — 2020-02-11 - … 117 more at https://npm.io/package/packing/versions ## README # Packing >基于webpack的前端集成开发环境和编译环境 [![NPM](https://nodei.co/npm/packing.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/packing/) [![Build Status](https://travis-ci.org/qails/qails.svg?branch=master)](https://travis-ci.org/packingjs/packing) [![Dependency Status](https://david-dm.org/packingjs/packing.svg)](https://david-dm.org/packingjs/packing) [![devDependency Status](https://david-dm.org/packingjs/packing/dev-status.svg)](https://david-dm.org/packingjs/packing#info=devDependencies) ## 特点 * 不依赖 host 文件，根据环境自动切换资源路径 * 节约开发服务器，多分支开发部署到同一台服务器不会相互覆盖 * 提供资源包体积分析报告 * Version>=4.0支持babel 7。 ## Install 1. 安装`yo`和`generator-packing` ``` npm install -g yo generator-packing ``` 2. 生成你的网站 ``` yo packing ``` 3. 启动开发模式 ``` npm run serve ``` 4. 在浏览器中预览网站 `http://localhost:8081` 5. 其他命令 ```sh # 编译工程 npm run build # 不同环境下编译工程 npm run build:dev npm run build:beta npm run build:prod # 编译并预览编译结果，端口8080 npm run serve:dist # 启动不带webpack-dashboard的开发环境 npm run serve:normal # 启动时自动打开浏览器功能 npm run serve -- --open npm run serve -- -o # 启动时强制清除DLL缓存功能 npm run serve -- --clean npm 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](examples/build-library)
演示输出一个工具类库 - [common-chunks](examples/common-chunks)
演示将共用代码打包成common包 - [custom-page-master](examples/custom-page-master)
演示自定义网页母模版 - [custom-page-title](examples/custom-page-title)
演示自定义网页标题、关键字、网页描述等信息 - [mock-ajax](examples/mock-ajax)
演示模拟异步请求 - [mock-graphql](examples/mock-graphql)
演示模拟GraphQL服务 - [mock-page-context-global](examples/mock-page-context-global)
演示模拟公用的模版数据 - [mock-page-context-promise](examples/mock-page-context-promise)
演示模拟从其他服务获取模版数据 - [remove-default-plugin](examples/remove-default-plugin)
演示删除packing默认配置 --- _Source: https://npm.io/package/packing · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._