22、Webpack在项目中的应用与配置

Webpack在项目中的应用与配置

1. 前置准备

在将Webpack添加到项目之前，需要确保已经安装了Node.js和npm。若未安装，可以参考相关安装指南进行安装。接下来，我们将按照以下步骤进行操作：
1. 安装Webpack
2. 安装依赖并保存到package.json
3. 配置Webpack的webpack.config.js
4. 配置开发服务器和热模块替换（HMR）

2. 安装Webpack及其依赖

使用Webpack需要安装一些额外的依赖，具体如下：
| 依赖名称 | npm名称 | 版本 | 作用 |
| ---- | ---- | ---- | ---- |
| Webpack | webpack | v2.4.1 | 打包工具 |
| 加载器（Loaders） | style-loader、css-loader、react-hot-loader、babel-loader、babel-core、babel-preset-react | 按package.json指定 | 处理样式、CSS、热模块替换（HMR）以及Babel/JSX预处理 |
| webpack-dev-server | webpack-dev-server | v2.4.2 | 基于Express的开发服务器，支持HMR |

可以手动安装每个模块，但建议从GitHub仓库复制 package.json 文件到项目根目录，然后在项目根目录（即包含 package.json 的目录）运行 npm i