wood3n/toycra

React Template CLI

toycra

🌞 used

webpack

• webpack，webpack-cli
• @babel/core，@babel/preset-env，@babel/preset-react，babel-loader
• pnp-webpack-plugin
• react-refresh
• React Refresh Webpack Plugin
• html-webpack-plugin
• style-loader，css-loader，postcss-loader
• mini-css-extract-plugin
• @fullhuman/postcss-purgecss
• glob
• optimize-css-assets-webpack-plugin
• url-loader
• SplitChunksPlugin
• babel-plugin-transform-runtime
• babel-plugin-inline-react-svg
• babel-plugin-react-css-modules
• babel-plugin-module-resolver
• @svgr/webpack
• image-webpack-loader
• react-dev-utils
• clean-webpack-plugin
• webpack-manifest-plugin
• webpack-bundle-analyzer
• speed-measure-webpack-plugin
• webpackbar

library

• react
• react-dom
• babel-runtime-corejs3
• core-js-pure

👊🏻 todo

• 集成react-router
• 集成react-redux
• 集成多页面开发
• CLI

📅 update

2020-08-16

• install webpack和webpack-cli
• install babel-loader,@babel/core, @babel/preset-env和@babel/preset-react
• 配置 webpack 支持使用 React JSX 编写组件
• 配置 npm-scripts 执行yarn build命令打包

2020-08-31

• 配置 npm scripts 区分 webpack 的 mode
• 配置开发环境 WDS
• 配置 WDS 的 HMR
• install @pmmmwh/react-refresh-webpack-plugin和react-refresh，并配置 React Fast Refresh
• 配置生产环境开启 source map
• install html-webpack-plugin，配置 HTML 模板页面
• install style-loader，css-loader，mini-css-extract-plugin，optimize-css-assets-webpack-plugin，配置 webpack 支持 CSS 解析打包
• install url-loader，配置图片 Base64 内联，配置字体文件解析
• install babel-plugin-inline-react-svg，支持 JSX 组件形式引入 SVG

2020-09-08

• install postcss-loader，优化 CSS 代码
• install @fullhuman/postcss-purgecss，配置 plugin 支持移除无用的 CSS 代码
• 探索 webpack 的 code splitting 功能，在打包的时候将node_modules第三方库和runtime代码抽成单独的 chunk
• 探索 webpack 的 tree shaking 配置，指定optimization.providedExports:true，optimization.usedExports:true以及指定package.json 的 sideEffects属性
• install clean-webpack-plugin，在打包的时候先清除build目录文件

2020-09-10

• 配置 webpack 的resolve规则去简化import的路径解析规则
• install pnp-webpack-plugin，探索学习 Plug'n'Play 的设计**
• 探索学习 webpack 的optimization配置项

2020-09-11

• 修改 webpack 抽取 chunk 的文件名配置，也就是指定output.chunkFilename和mini-css-extract-plugin的chunkFilename
• 优化babel-loader配置，引入 cacheDirectory:true，引入 @babel/plugin-transform-runtime plugin

2020-09-12

• install webpack-bundle-analyzer，引入 yarn build以后，打包结果的分析命令 yarn analyze
• install speed-measure-webpack-plugin，终端输出打包过程的耗时信息
• 修改 webpack-bundle-analyzer的配置项 analyzerMode: "disabled"，这样在打包完成以后就可以自动结束终端运行了
• install cache-loader，测试在一些耗时长的 loader 使用时的缓存效果，例如像压缩图片的 image-webpack-loader这样的 loader 前使用

2020-09-13

• 探索使用 DllPlugin 打包第三方库，目前尚未解决和 SplitChunksPlugin的冲突问题

2020-09-14

• 探索使用 externals + CDN 的方式引入第三方库，替代DllPlugin的方案
• babel-plugin-inline-react-svg无法解析 alias 的 SVG 路径，替换为@svgr/webpack
• 引入 webpackbar，简化 webpack 构建时的 CLI 信息

2020-09-15

• 修改 HTML 模板页，引入 React CDN 链接
• install babel-plugin-module-resolver，解决 babel-plugin-inline-react-svg无法识别 SVG 通过 resolve.alias引入的路径问题

2020-09-17

• 探索 core-js polyfill 库，深入 @babel/plugin-transform-runtime配置，并引入 @babel/runtime-corejs3和 [email protected]库
• 优化"@babel/preset-env"配置