{"id":16955100,"url":"https://github.com/wood3n/toycra","last_synced_at":"2026-04-11T12:39:26.167Z","repository":{"id":157256995,"uuid":"287915296","full_name":"wood3n/toycra","owner":"wood3n","description":"React Template CLI","archived":false,"fork":false,"pushed_at":"2020-10-22T16:29:28.000Z","size":9771,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-26T08:26:18.704Z","etag":null,"topics":["react","react-redux","react-router","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wood3n.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-16T09:47:00.000Z","updated_at":"2020-10-22T16:29:30.000Z","dependencies_parsed_at":null,"dependency_job_id":"1884ddb4-342b-4aea-9095-aea58dee3939","html_url":"https://github.com/wood3n/toycra","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/wood3n%2Ftoycra","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wood3n%2Ftoycra/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wood3n%2Ftoycra/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wood3n%2Ftoycra/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wood3n","download_url":"https://codeload.github.com/wood3n/toycra/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244795518,"owners_count":20511521,"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":["react","react-redux","react-router","webpack"],"created_at":"2024-10-13T22:11:19.963Z","updated_at":"2026-04-11T12:39:21.144Z","avatar_url":"https://github.com/wood3n.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## toycra\n\n## 🌞 used\n\n### webpack\n\n-   [webpack](https://github.com/webpack/webpack)，[webpack-cli](https://github.com/webpack/webpack-cli)\n-   [@babel/core](https://babeljs.io/docs/en/core-packages)，[@babel/preset-env](https://babeljs.io/docs/en/babel-preset-env)，[@babel/preset-react](https://babeljs.io/docs/en/babel-preset-react)，[babel-loader](https://webpack.js.org/loaders/babel-loader/)\n-   [pnp-webpack-plugin](https://github.com/arcanis/pnp-webpack-plugin)\n-   [react-refresh](https://www.npmjs.com/package/react-refresh)\n-   [React Refresh Webpack Plugin](https://github.com/pmmmwh/react-refresh-webpack-plugin/#react-refresh-webpack-plugin)\n-   [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)\n-   [style-loader](https://github.com/webpack-contrib/style-loader)，[css-loader](https://github.com/webpack-contrib/css-loader)，[postcss-loader](https://github.com/webpack-contrib/postcss-loader)\n-   [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin)\n-   [@fullhuman/postcss-purgecss](https://github.com/FullHuman/purgecss/tree/master/packages/postcss-purgecss)\n-   [glob](https://github.com/isaacs/node-glob#readme)\n-   [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin)\n-   [url-loader](https://github.com/webpack-contrib/url-loader#options)\n-   [SplitChunksPlugin](https://webpack.docschina.org/plugins/split-chunks-plugin/)\n-   [babel-plugin-transform-runtime](https://babeljs.io/docs/en/babel-plugin-transform-runtime/#installation)\n-   [babel-plugin-inline-react-svg](https://github.com/airbnb/babel-plugin-inline-react-svg)\n-   [babel-plugin-react-css-modules](https://github.com/gajus/babel-plugin-react-css-modules)\n-   [babel-plugin-module-resolver](https://github.com/tleunen/babel-plugin-module-resolver)\n-   [@svgr/webpack](https://github.com/gregberge/svgr/tree/master/packages/webpack)\n-   [image-webpack-loader](https://github.com/tcoopman/image-webpack-loader#image-webpack-loader)\n-   [react-dev-utils](https://github.com/facebook/create-react-app/tree/master/packages/react-dev-utils)\n-   [clean-webpack-plugin](https://github.com/johnagan/clean-webpack-plugin)\n-   [webpack-manifest-plugin](https://github.com/danethurber/webpack-manifest-plugin)\n-   [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer)\n-   [speed-measure-webpack-plugin](https://github.com/stephencookdev/speed-measure-webpack-plugin)\n-   [webpackbar](https://github.com/nuxt/webpackbar)\n\n### library\n\n-   [react](https://github.com/facebook/react)\n-   [react-dom](https://github.com/facebook/react/tree/master/packages/react-dom)\n-   [babel-runtime-corejs3](https://github.com/babel/babel/tree/main/packages/babel-runtime-corejs3)\n-   [core-js-pure](https://github.com/zloirock/core-js/tree/master/packages/core-js-pure)\n\n## 👊🏻 todo\n\n-   [ ] 集成`react-router`\n-   [ ] 集成`react-redux`\n-   [ ] 集成多页面开发\n-   [ ] CLI\n\n## 📅 update\n\n### 2020-08-16\n\n-   install `webpack`和`webpack-cli`\n-   install `babel-loader`,`@babel/core`, `@babel/preset-env`和`@babel/preset-react`\n-   配置 webpack 支持使用 React JSX 编写组件\n-   配置 npm-scripts 执行`yarn build`命令打包\n\n### 2020-08-31\n\n-   配置 npm scripts 区分 webpack 的 mode\n-   配置开发环境 WDS\n-   配置 WDS 的 HMR\n-   install `@pmmmwh/react-refresh-webpack-plugin`和`react-refresh`，并配置 React Fast Refresh\n-   配置生产环境开启 source map\n-   install `html-webpack-plugin`，配置 HTML 模板页面\n-   install `style-loader`，`css-loader`，`mini-css-extract-plugin`，`optimize-css-assets-webpack-plugin`，配置 webpack 支持 CSS 解析打包\n-   install `url-loader`，配置图片 Base64 内联，配置字体文件解析\n-   install `babel-plugin-inline-react-svg`，支持 JSX 组件形式引入 SVG\n\n### 2020-09-08\n\n-   install `postcss-loader`，优化 CSS 代码\n-   install `@fullhuman/postcss-purgecss`，配置 plugin 支持移除无用的 CSS 代码\n-   探索 webpack 的 code splitting 功能，在打包的时候将`node_modules`第三方库和`runtime`代码抽成单独的 chunk\n-   探索 webpack 的 tree shaking 配置，指定`optimization.providedExports:true`，`optimization.usedExports:true`以及指定`package.json` 的 `sideEffects`属性\n-   install `clean-webpack-plugin`，在打包的时候先清除`build`目录文件\n\n### 2020-09-10\n\n-   配置 webpack 的`resolve`规则去简化`import`的路径解析规则\n-   install `pnp-webpack-plugin`，探索学习 Plug'n'Play 的设计思想\n-   探索学习 webpack 的`optimization`配置项\n\n### 2020-09-11\n\n-   修改 webpack 抽取 chunk 的文件名配置，也就是指定`output.chunkFilename`和`mini-css-extract-plugin`的`chunkFilename`\n-   优化`babel-loader`配置，引入 `cacheDirectory:true`，引入 `@babel/plugin-transform-runtime` plugin\n\n### 2020-09-12\n\n-   install `webpack-bundle-analyzer`，引入 `yarn build`以后，打包结果的分析命令 `yarn analyze`\n-   install `speed-measure-webpack-plugin`，终端输出打包过程的耗时信息\n-   修改 `webpack-bundle-analyzer`的配置项 `analyzerMode: \"disabled\"`，这样在打包完成以后就可以自动结束终端运行了\n-   install `cache-loader`，测试在一些耗时长的 loader 使用时的缓存效果，例如像压缩图片的 `image-webpack-loader`这样的 loader 前使用\n\n### 2020-09-13\n\n-   探索使用 `DllPlugin` 打包第三方库，目前尚未解决和 `SplitChunksPlugin`的冲突问题\n\n### 2020-09-14\n\n-   探索使用 `externals` + CDN 的方式引入第三方库，替代`DllPlugin`的方案\n-   `babel-plugin-inline-react-svg`无法解析 alias 的 SVG 路径，替换为`@svgr/webpack`\n-   引入 webpackbar，简化 webpack 构建时的 CLI 信息\n\n### 2020-09-15\n\n-   修改 HTML 模板页，引入 React CDN 链接\n-   install `babel-plugin-module-resolver`，解决 `babel-plugin-inline-react-svg`无法识别 SVG 通过 `resolve.alias`引入的路径问题\n\n### 2020-09-17\n\n-   探索 `core-js` polyfill 库，深入 `@babel/plugin-transform-runtime`配置，并引入 `@babel/runtime-corejs3`和 `core-js-pure@3.6.5`库\n-   优化`\"@babel/preset-env\"`配置\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwood3n%2Ftoycra","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwood3n%2Ftoycra","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwood3n%2Ftoycra/lists"}