{"id":19962108,"url":"https://github.com/chryseis/beauty-webpack","last_synced_at":"2026-05-09T22:02:42.391Z","repository":{"id":39424697,"uuid":"202403656","full_name":"Chryseis/beauty-webpack","owner":"Chryseis","description":"quick build a react project","archived":false,"fork":false,"pushed_at":"2023-01-04T07:18:51.000Z","size":4267,"stargazers_count":0,"open_issues_count":25,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-12T07:46:42.538Z","etag":null,"topics":["webpack"],"latest_commit_sha":null,"homepage":null,"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/Chryseis.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2019-08-14T18:21:01.000Z","updated_at":"2020-03-07T17:13:34.000Z","dependencies_parsed_at":"2023-02-02T03:02:08.863Z","dependency_job_id":null,"html_url":"https://github.com/Chryseis/beauty-webpack","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chryseis%2Fbeauty-webpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chryseis%2Fbeauty-webpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chryseis%2Fbeauty-webpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chryseis%2Fbeauty-webpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Chryseis","download_url":"https://codeload.github.com/Chryseis/beauty-webpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241396748,"owners_count":19956404,"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":["webpack"],"created_at":"2024-11-13T02:09:33.127Z","updated_at":"2026-05-09T22:02:37.362Z","avatar_url":"https://github.com/Chryseis.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Beauty-webpack\n![NPM](https://img.shields.io/npm/l/beauty-webpack) ![GitHub package.json version](https://img.shields.io/github/package-json/v/Chryseis/beauty-webpack)\n\n## Motive\n快速搭建前端项目，减少webpack配置学习成本\n## Install\n```bash\nnpm install beauty-webpack --save-dev\n```\n## Usage\n### 命令\n```bash\n//package.json\n{\n  \"script\": {\n      //开发\n      \"start\": \"beauty start\",\n      //打包\n      \"build\": \"beauty build\",\n      //分析\n      \"analyze\": \"beauty analyze\"\n  }\n}\n```\n\n### Spa项目\n#### 目录结构\n```\n.\n+-- src\n|   +-- ...\n|   +-- index.(js|jsx)\n```\n#### 入口文件\n```jsx harmony\n//src/index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nconst Home=()=\u003e\u003cdiv\u003eHome\u003c/div\u003e\n\nReactDOM.render(\u003cHome/\u003e, document.querySelector('#root'))\n```\n### Mpa项目\n#### 目录结构\n```\n.\n+-- src\n|   +-- ...\n|   +-- activity\n|       +-- index.(js|jsx)\n|   +-- home\n|       +-- index.(js|jsx)\n\n```\n#### 入口文件\n```jsx harmony\n//src/(folder)/index.js\nimport React from 'react'\nimport ReactDOM from 'react-dom'\n\nconst Home=()=\u003e\u003cdiv\u003eHome\u003c/div\u003e\n\nReactDOM.render(\u003cHome/\u003e, document.querySelector('#root'))\n```\n### 配置文件\n允许自定义添加配置文件修改webpack配置\n需要在根目录添加.beautyrc.js文件\n\n#### 属性\n属性|说明|备注\n---|---|---\nentry|入口配置(只限Spa项目)|参考[webpack entry](https://www.webpackjs.com/configuration/entry-context/#entry)\noutput|输出配置| 参考[webpack output](https://www.webpackjs.com/configuration/output/)\npublicPath|文件输出目录|参考[webpack publicPath](https://www.webpackjs.com/configuration/output/#output-publicpath)\nisExtractCss|是否提取公共样式|\nalias|别名|默认@为src文件夹\nsplitChunks|分包策略|参考[webpack splitChunks](https://webpack.js.org/plugins/split-chunks-plugin/#root)\nchunks|js分包模块|配合entry \ndefine|定义项目全局变量|参考[webpack define](https://webpack.js.org/plugins/define-plugin/#root)\ndevServer|开发服务器配置|参考[webpack devServer](https://www.webpackjs.com/configuration/dev-server/)\ntitle|输出页面的title|\nport|开发服务器端口号|默认值：3000\nopen|开发服务器编译完成是否立即打开页面\nbabelPlugins|babel插件引入|```babelPlugins: [[\"import\", {\"libraryName\": \"antd\",\"libraryDirectory\": \"es\",\"style\": true // `style: true` 会加载 less 文件}]]```\nisCssModule|是否开启css module| 默认值:true\nisRem｜是否启用rem｜默认值：true\nrootFontSize|根元素字体大小｜默认值：75\n\n#### 配置文件例子\n```\n//.beautyrc.js\nconst path = require('path')\nconst PREFIX = process.env.PREFIX\nconst env = process.env.NODE_ENV\n\nmodule.exports = {\n    entry: {\n        track: path.resolve(__dirname, './src/utils/track'),\n        beauty: ['@babel/polyfill', path.resolve(__dirname, './src/index')]\n    },\n    chunks: ['vendor', 'beauty', 'track'],\n    isExtractCss: env !== 'development',\n    define: {\n        \"process.env.BASE_NAME\": JSON.stringify(PREFIX || '')\n    },\n    splitChunks: {\n        maxAsyncRequests: Infinity,\n        maxInitialRequests: Infinity,\n        minSize: 10000,\n        cacheGroups: {\n            vendor: {\n                name: 'vendor',\n                chunks: 'all',\n                test: /[\\\\/]node_modules[\\\\/](react|react-dom)[\\\\/]/,\n            },\n            clipboard: {\n                name: 'clipboard',\n                chunks: 'all',\n                test: /[\\\\/]node_modules[\\\\/](clipboard)[\\\\/]/,\n            }\n        }\n    }\n}\n```\n\n### 模版文件\n默认有模板文件，需要自定义可以在src目录下添加document.ejs 配置参数参考[html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"UTF-8\"/\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"/\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0\"/\u003e\n    \u003cscript src=\"//web-cdn.meilly.cn/stash/flexible.js\"\u003e\u003c/script\u003e\n    \u003ctitle\u003e\u003c%= htmlWebpackPlugin.options.title %\u003e\u003c/title\u003e\n    \u003clink rel=\"icon\" href=\"/favicon.png\" type=\"image/x-icon\"/\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cnoscript\u003eSorry, we need js to run correctly!\u003c/noscript\u003e\n\u003cdiv id=\"root\"\u003e\n\u003c/div\u003e\n\u003c% htmlWebpackPlugin.files.js.forEach(function(js) { %\u003e\n    \u003cscript src=\"\u003c%= js %\u003e\"\u003e\u003c/script\u003e\n\u003c% }) %\u003e\n\u003c% if(webpackConfig.mode === 'production') { %\u003e\n    \u003cscript defer\n            src=\"https://jic.talkingdata.com/app/h5/v1?appid=2F65664B662A4C80A0F941774CFD28FB\u0026vn=mellyv1.0\u0026vc=2.7.1\"\u003e\u003c/script\u003e\n\u003c% } %\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchryseis%2Fbeauty-webpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchryseis%2Fbeauty-webpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchryseis%2Fbeauty-webpack/lists"}