Yarn + Webpack + React：从零开始创建种子项目

本文档主要介绍了如何利用yarn工具构建一个基于webpack和React的种子项目。首先，确保你的Node.js环境已经升级至4.0以上，并且yarn已安装。如果没有yarn，可以使用npm替代。 1. **初始化项目**: 创建一个名为`yarn-react-webpack-seed`的空文件夹，然后通过`yarn init`或`npm init`初始化项目，生成`package.json`文件，填写基本项目信息。在这个过程中，你需要在`dependencies`部分添加React、react-dom和react-router的基本版本，如`"react": "^15.4.0-rc.4"`等。 2. **安装依赖**: 使用`yarn install`或`npm install`来安装项目所需的开发依赖，包括Babel、Webpack及其相关插件，如`babel-loader`、`babel-preset-es2015`、`babel-preset-react`等。这些工具将用于编译JavaScript代码，使其能在浏览器中运行。 3. **配置Webpack**: 创建`webpack.config.js`文件，引入`webpack`模块并配置入口点。入口点包含Webpack开发服务器客户端、热更新服务和应用程序的起点，如`["webpack-dev-server/client?http://localhost:9000", 'webpack/hot/only-dev-server', "./src/index"]`。Webpack将处理这些模块，打包成静态文件。 4. **项目结构**: 项目结构包括以下文件和目录： - `build`: 打包后的文件将被放置在此处，供生产环境使用。 - `src`: 存放源代码，通常包含React组件和入口文件。 - `webpack.config.js`: Webpack的配置文件。 - `package.json`: 项目元数据，包含了依赖和脚本信息。 - `index.html`: 应用程序的入口点，用于渲染React组件。 - `server.js` (可选): 可能用于设置服务器和热加载功能。 5. **构建流程**: 当项目启动时，通过运行`yarn start`或`npm start`，Webpack-dev-server会监听指定端口，同时热加载功能会在代码更改时自动刷新页面，使得开发过程更加高效。 总结起来，这个指南提供了使用yarn管理工具构建React应用与Webpack打包工具集成的步骤，包括项目初始化、依赖安装、Webpack配置和项目目录结构的设立，有助于开发者快速上手并搭建起一个可维护的开发环境。