{"id":24430895,"url":"https://github.com/zhbhun/easepack","last_synced_at":"2025-04-12T12:45:18.047Z","repository":{"id":56824175,"uuid":"81618683","full_name":"zhbhun/easepack","owner":"zhbhun","description":"Frontend ease bundler","archived":false,"fork":false,"pushed_at":"2021-01-15T10:18:44.000Z","size":4338,"stargazers_count":10,"open_issues_count":5,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-12-27T09:31:17.043Z","etag":null,"topics":["babel","react","webpack","webpack4"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zhbhun.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-11T00:19:08.000Z","updated_at":"2021-04-29T06:33:27.000Z","dependencies_parsed_at":"2022-09-16T18:11:04.897Z","dependency_job_id":null,"html_url":"https://github.com/zhbhun/easepack","commit_stats":null,"previous_names":["zhbhun/create-react-spa"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhbhun%2Feasepack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhbhun%2Feasepack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhbhun%2Feasepack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zhbhun%2Feasepack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zhbhun","download_url":"https://codeload.github.com/zhbhun/easepack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247988240,"owners_count":21029075,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","react","webpack","webpack4"],"created_at":"2025-01-20T14:58:11.546Z","updated_at":"2025-04-12T12:45:18.021Z","avatar_url":"https://github.com/zhbhun.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Easepack 是基于 webpack 的通用打包工具，内置常用插件和加载器的默认配置。\n========\n\n[English Version](./README_en.md)\n\n## 安装\n\n\u003e npm install --save-dev easepack\n\n## 用法\n\n启动开发服务器：\n\n\u003e easepack start --config ./config/easepack.dev.js\n\n构建生产环境:\n\n\u003e easepack build --config ./config/easepack.prod.js\n\n## 快速上手\n\n- 创建项目:\n\n    - `mkdir easepack-demo \u0026\u0026 cd easepack-demo`\n    - `npm init -y`\n    - `npm install easepack --save-dev`\n\n    ```\n      easepack-demo\n    + |- package.json\n    ```\n\n- 创建文件:\n\n    - .eslintrc\n\n        ```json\n        {\n          \"extends\": \"eslint:recommended\",\n          \"parserOptions\": {\n            \"ecmaVersion\": 6,\n            \"sourceType\": \"module\"\n          },\n          \"env\": {\n            \"browser\": true\n          }\n        }\n        ```\n\n    - easepack.js\n\n        ```javascript\n        module.exports = {\n          presets: [\n            [\n              require.resolve('easepack/lib/config/es'), /* 继承 easepack/lib/config/es 的配置 */\n              {\n                input: 'index.html' /* 设置项目入口文件 */\n              }\n            ]\n          ]\n        };\n        ```\n\n    - index.html\n\n        ```html\n        \u003c!doctype html\u003e\n        \u003chtml\u003e\n        \u003chead\u003e\n          \u003ctitle\u003eGetting Started\u003c/title\u003e\n        \u003c/head\u003e\n        \u003cbody\u003e\n          \u003cscript src=\"./src/index.js\"\u003e\u003c/script\u003e\n        \u003c/body\u003e\n        \u003c/html\u003e\n        ```\n\n    - src/index.js\n\n        ```javascript\n        function component() {\n          var element = document.createElement('div');\n          element.innerHTML = 'Hello easepack!';\n          return element;\n        }\n        document.body.appendChild(component());\n        ```\n\n    ```\n      easepack-demo\n      |- package.json\n    + |- .eslintrc\n    + |- easepack.js\n    + |- index.html\n    + |- /src\n    +   |- index.js\n    ```\n\n- 启动开发服务器:\n\n    `npx easepack start --config ./easepack.js`\n\n- 构建生产环境:\n\n    `npx easepack build --config ./easepack.js`\n\n## 配置\n\nEasepack 在 webpack 的基础上增加了一项配置 `preset`，用于继承一些公用的配置。除此之外，Easepack 支持 webpack 的所有配置，并且会覆盖 `preset` 中的配置。\n```\n{\n  // 类似 babel 的 presets\n  presets: [\n    [\n      string, // 预设模块的路径（绝对路径）\n      object // 预设模块的参数\n    ]\n    // 可以配置多个预设模块\n  ]\n}\n```\n\n### 内置 Presets\n\n到目前为止，Easepack 内置了两个预设配置：`easepack/lib/config/es` 和 `easepack/lib/config/react`。\n除了后者针对 react 增加了一些 babel 配置外，它们数都支持以下预设参数：\n\n- mode: 构建模式，等同于 webpack4 新增的属性 [mode](https://webpack.js.org/concepts/mode).\n\n    Easepack 默认根据构建命令来设置 mode。如果是 `build`， 那么 `mode` 默认设置为 `production`。如果是 `start`，那么 `mode` 默认设置为 `development`。\n\n- context：基础目录，绝对路径，用于从配置中解析入口起点和加载器，等同于 [contenxt](https://webpack.js.org/configuration/entry-context/#context)，默认值为项目的根路径。\n- input：起点或是应用程序的起点入口，等同于 [entry](https://webpack.js.org/configuration/entry-context/#entry)，默认值为 `src/index.js`。\n- vendors：构建缓存（DLL 插件实现），推荐在开发环境使用，生成环境的拆包请使用 webpack4 的 splitChunks。\n\n    - false: 禁用该项功能，默认值。\n    - true: 自动查找项目的第三方依赖来构建缓存（package.json 的 dependencies）\n    - string|array|object: 等同于 [entry](https://webpack.js.org/configuration/entry-context/#entry)，可以自定义构建缓存模块。\n\n- outputPath：构建输出路径，等用于 [output.path](https://webpack.js.org/configuration/output/#output-path)，默认值是 `dist`。\n- publicPath： 打包资源的服务路径，等同于 [output.publicPath](https://webpack.js.org/configuration/output/#output-publicpath)，默认值是 `/`。\n- filename：输出文件命名方式\n\n    - filename.js: JS 文件命名规则\n    - filename.css: CSS 文件命名规则\n    - filename.media: 图片，音频等其他媒体文件的命名规则\n    - filename.library: DLL 库的命名规则\n    - filename.html: HTML 的命名规则\n\n    默认情况下，easepack 针对不同的 mode 提供了不同的默认配置\n\n    - 生产环境\n\n        ```javascript\n        {\n          filename: {\n            js: '[name].[contenthash:8].js',\n            css: '[name].[contenthash:8].css',\n            media: '[name].[hash:8].[ext]',\n            manifest: '[name].manifest.json',\n            library: '[name]_library',\n            html: '[name].html'\n          }\n        }\n        ```\n\n    - 开发环境\n\n        ```javascript\n        {\n          filename: {\n            js: '[name].[hash:8].js',\n            css: '[name].[hash:8].css',\n            media: '[name].[hash:8].[ext]',\n            manifest: '[name].manifest.json',\n            library: '[name]_library',\n            html: '[name].html'\n          },\n        }\n        ```\n\n- targets：编译兼容目标，等同于 [babel-preset-env targets](https://babeljs.io/docs/plugins/preset-env/)，默认值为 `{ browsers: ['last 2 versions', 'safari \u003e= 7'] }`。\n- hot: 是否启用热加载，默认值为 `true`\n- sourceMap: 是否启用 sourceMap，等同于 [devtool](https://webpack.js.org/configuration/devtool/)，开发环境默认为 `eval`，生产环境默认为 `false`。\n- analyzer: 是否启用构建分析，为 `true` 会使用 `webpack-bundle-analyzer` 来分析打包文件的内部组成和模块占用大小。生成环境默认为 `true`，开发环境默认为 `false`。\n- dataURLLimit：设置 `url-loader` 的属性 [`limit`](https://github.com/webpack-contrib/url-loader#limit)，开发环境默认为 `1`，生产环境默认为 `5120`。\n- cssModules: 是否启动 CSS Modules，默认 `false`。\n- env：针对不同 `mode` 的特殊配置。\n\n    - env.production：在 `mode` 等于 `production` 时，该项配置会覆盖外部的预设参数。\n    - env.development：在 `mode` 等于 `development` 时，该项配置会覆盖外部的预设参数。\n\n### 自定义 Presets\n\n参考 [es](./src/config/es.js) 和 [react](./src/config/react.js)。\n\n## 示例\n\n- [HTML Entry](./examples/entry)\n- [DLL](./examples/vendors)\n- [React](./examples/react)\n- [ENV Config](./examples/env)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhbhun%2Feasepack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzhbhun%2Feasepack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzhbhun%2Feasepack/lists"}