Webpack+React模块化打包框架
Webpack 的模块打包配 React 的组件化，是真的香。尤其你要手动搭建项目架子，不走create-react-app那套，Webpack 那一套配置能让你自由掌控每一步，灵活又清晰。搭上 Babel 搞定JSX编译，用起来顺滑得。
Webpack 的打包机制比较像是在拼乐高，把你写的JS、CSS、图片都当模块，一股脑打成浏览器能识别的文件，省事不少。再配合几个插件，像HtmlWebpackPlugin、MiniCssExtractPlugin，自动注入、分离样式都不在话下。
React这边就不用多说了，UI 开发的老朋友。写组件、传 props、搞状态，都挺顺。搭上 Webpack 之后，热更新、打包发布都一条龙服务。
你只要按这几个步骤来：先初始化项目结构，有src/index.js、index.html这些基础文件。装上 Webpack、Babel 和 React 相关依赖，写个webpack.config.js，搞定入口和出口，再加个.babelrc把JSX编译搞定。写几条npm script，跑起来就行。
开发时还能用webpack-dev-server，边写边预览，自动刷新，体验蛮不错。想进一步优化构建速度或者包体积，还能用SplitChunksPlugin做代码拆分，TerserPlugin压缩 JS，打生产包的时候特方便。
如果你想看看具体的配置例子，我下面列了些蛮实用的链接，按图索骥就能上手：
- 使用 webpack 配置打包组件
- Webpack 模块化打包示例
- Webpack 模块化打包方法
- React Webpack 沙箱配置
- Webpack 进行 React 项目样板配置
- Webpack2 模块打包入门指南
如果你不想依赖脚手架，想自己掌控 Webpack 和 React 的配置节奏，这套流程还挺值得一试的。
文件大小：1.98MB
评论区