webpack-react-starter React项目Webpack模板
React 项目的 Webpack 配置真是绕不过去的一关。webpack-react-starter这个模板挺不错，基础配置都给你搭好了，适合不想从零折腾 Webpack 的你。
Webpack 的配置其实说难也不难，关键是得明白它几个核心点。比如webpack.config.js里怎么设置入口、输出、加载器和插件，这些都搞清楚，打包逻辑也就顺了。
React 的.jsx文件？那必须得配好Babel，搭配@babel/preset-env和@babel/preset-react，JSX 转 JavaScript，ES6 语法也能搞定。你可以把配置写在.babelrc里，也可以用babel.config.js。
Webpack 就是它的模块加载器。像babel-loader专门 JS 和 JSX，style-loader和css-loader搞定样式，静态资源用file-loader或者url-loader也都行，按需配置就好。
插件这块也别忽略。像html-webpack-plugin能自动生成 HTML，terser-webpack-plugin能压缩 JS，还有autoprefixer帮你补全浏览器前缀，省不少事。
开发阶段可以开个webpack-dev-server，支持热更新，保存就能刷新页面，开发效率噌噌地上。Hot Module Replacement也配置上，体验更顺滑。
上线之前记得切成production模式，代码压缩、tree shaking、提取 CSS 这些优化步骤都安排上，打包出来干净利落。
整个项目结构还挺清晰的，src/放组件和index.js，public/放静态文件，其他配置文件都在根目录，像package.json、.gitignore、webpack.config.js这些一目了然。
如果你刚好在搭 React 项目，又不想从头配 Webpack，不妨看看这个webpack-react-starter，照着改一改就能用，还能学到不少 Webpack 的套路。
文件大小：179.87KB
评论区