手动使用Webpack搭建react项目---1

前言：本文只是本人使用webpack搭建基础react项目的的记录，仅供参考。

第一步：首先请确保node、npm已安装

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

第二步：创建项目文件夹并初始化

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

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

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

第四步：创建webpack.config.js配置文件

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

第五步：安装react和react-dom

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

第六步：安装解析ES6和JSX语法的Babel

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

第七步：根目录下创建.babelrc文件

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

第八步：安装本地启动服务的webpack-dev-server和解析解析html的插件html-webpack-plugin

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

第九步：根目录下新建src文件夹和index.html文件，并在src下新建index.js文件

index.html文件中写入如下

index.js文件中写入如下

第十步：补全webpack.config.js配置文件和package.json文件

第十一步：package.json中配置项目的启动和打包命令

最后看一下项目的目录结构和打包后的结构
项目目录结构
控制台输入：npm run dev //回车
项目就会自动运行并启动浏览器；
控制台输入：npm run build //回车
项目就会启动打包并在项目的根目录下生成build文件夹；

到现在恭喜你已完成了最基本的react的项目搭建的配置。其他的项目中需要的配置需要你自行配置，后面有时间再配置一些css/less-loader和打包优化的内容。