react 新建项目_webpack 搭建 react 项目

webpack搭建react项目

前言：

现在比较火的前端框架有react和vue。对应的框架都有相应的脚手架可以快速搭建项目。这些脚手架使用的一个重要打包模块就是webpack。虽然脚手架使用方便，但是脚手架也有其弊端，比如就是脚手架搭建的项目会有很多用不到的模块，而且脚手架搭建的项目要按需更改配置就需要 eject 出 webpack 的配置，且这个过程是不可逆的。本文主要介绍自己实际使用webpack 手动搭建react的基础项目的记录。

概念：

1. 官网给 webpack 的概念描述是 “webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle ”。
2. React官网给其的定义是“React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库”。

webpack的配置内容是非常多的，这里首先介绍其四个核心概念

• 入口（entry）:入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。
• 出口（output）:output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。
• Loader：loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。
• 插件（plugins）:loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。

webpack搭建react的项目的步骤

1. 首先请确保node、npm已安装

可以在控制台通过输入：node -v //回车 <查看出现node版本，则安装成功>
可以在控制台通过输入：npm -v //回车 <查看出现npm 版本，则安装成功>

2. 创建项目文件夹并初始化

在你想要搭建项目的位置建一个项目根目录，然后启动控制台，并调到新建的项目的根目录文件夹下，控制台中输入：npm init -y //回车 <此时你的根目录中会出现一个package.json的文件>

3. 安装webpack和webpack-cli <这里演示的是webpack4.0以后的版本>

在控制台中输入：npm install webpack webpack-cli -D //回车 <等待安装完成后，项目的根目录里会出现一个 node_modules 文件夹，这里面就是你项目中需要的第三方文件，此时package.json 文件中在devDependencies模块下会有对应的 webpack 和 webpack-cli 及版本>

4. 创建 webpack.config.js 配置文件

在项目的根目录下创建一个 webpack.config.js 配置文件

5. 安装 react 和 react-dom

控制台中输入：
npm install react react-dom -S

6. 安装解析 ES6 和 JSX 语法的 Babel

控制台中输入：
npm install babel-core babel-loader@7 babel-preset-env babel-preset-react -D

7. 根目录下创建.babelrc文件

文件中配置相应的内容来告诉babel-loader 使用ES6和JSX插件
文件内容：
{
“presets”: [“env”,“react”]
}

8. 安装本地启动服务的 webpack-dev-server 和解析解析 html 的插件 html-webpack-plugin

控制台中输入：
npm install webpack-dev-server html-webpack-plugin -D

9. 安装打包时保证build文件夹下的是最新的打包文件插件clean-webpack-plugin

控制台中输入：
npm install clean-webpack-plugin -D

10. 根目录下新建src文件夹和index.html文件，并在src下新建index.js文件

index.html 文件中写入如下:

index.js 文件中写入如下

11. 补全 webpack.config.js 配置文件和 package.json 文件

12. package.json 中配置项目的启动和打包命令

截止到现在使用 webpack 手动搭建 react 项目的基础配置就完成了，现在在看看你的项目目录结构应该是这样的

在项目的根目录下打开控制台并输入：npm run dev

即可以看到下面浏览器自动打开的界面

控制台输入：npm run build，项目就会启动打包并在项目的根目录下生成 build 文件夹；

到这里一个简单的 webpack 搭建的 react 项目就好了，其他的项目中需要的配置需要你自行另外配置。

结尾：

本文为自己研究 webpack 和 react 搭建基础项目的一个总结记录，更多的有关 webpack 和 react 的知识请查看相应官网学习，有不足和问题出请的地方烦请指出。