webpack手动配置react基础环境

大致步骤：
　　1.新建项目文件， mkdir react-demo ,新建一个react项目文件；
　　2.初始化项目，生成package.json文件：npm init； 一路回车，会在文件底部生成一个package.json文件。
　　3.安装项目依赖：cnpm i webpack webpack-cli  -S，如果没有全局安装的，需要安装一下，便于你任何项目位置可以输入webpack命令；
　　4.项目安装react react-dom； cnpm i react react-dom -S
　　安装完3.4步骤之后，package.json dependencies 会多如下配置：

　　

 

 

 
　　5.接着安装webpack-dev-server: cnpm i webpack-dev-server -D 热更新插件：
　　6.安装识别react的插件，有些依赖： cnpm i @babel/core babel-loader @babel/preset-env @babel/preset-react -D;
　　7.安装sass 插件， 以及识别css插件： cnpm i css-loader style-loader node-sass sass-loader 在后面会给出webpack的详细配置；
　　8.安装html-webpack-plugin html的模版插件，主要用来生成打包文件的模版。 cnpm i html-webpack-plugin -D;  

　　安装完以上步骤之后，package.json中 devDependencies会多如下配置：
　　

 

 

 　　

　　9.接下来我们来配置一下项目文件：
　　在react-demo根目录新建 src文件。新建public文件；  mkdir src && mkdir public；
　　然后在src文件下面建立我们所需index.js文件，在public下建立我们所需index.html模版文件。 touch index.js / touch index.html.
　　最后在react-demo根目录新建我们所需的 webpack.config.js 配置文件。整个目录结构应该是这样的。
　　

　　10.生成基本文件之后，我们可以开始文件代码编写了：

　　首先：index.html为我们基础html模版文件：我们只需如下简单新建即可

　　　　

 

　　其次：inidex.js为我们的项目入口文件，我们可以加入一下基本代码：

　　　　

 

 

 　　　　

　　　　

 

　　11.以上为基础所需插件我们可以在script中加入快捷命令。

　　

　　整个webpack.config.js文件配置如下：

　　 1）首先我们依赖nodejs 的path模块，获取当前路径：  在项目中引入既可以， const path = require('path');
　　 2)  我们需要的html-webpack-plugin也是需要同样方法引入；const HtmlWebpackPlugin = require('html-webpack-plugin');

　　 3）其次就是我们webpack.config.js的基本配置了：

　　　　1）module.exports导出当前配置文件：

　　　　2）里面基本配置包含 entry：入口文件， output：出口文件，mode：模式（开发/生产模式），devServer环境配置，module：规则配置，plugins：插件配置；　　　　

　　　　3）我们入口文件选择 src下面index.js文件即可，

　　　　4）输出位置我们可以选自己希望打包后的文件位置，名称即可；

　　　　5）devServer里面配置我们所需项目启动地址，端口，代码压缩等基本配置；

　　　　6）module配置匹配规则，使用不同插件处理我们的文件，use里面多个插件，是从右往左开始编译执行，比如先用sass-loader转译为css， 再使用css-loader转译为浏览器

　　　　识别css代码，再通过style-loader生成style标签载入head中。

　　　　7）plugin中配置我们一些需要的插件。

 

　　

 　　在项目中输入 npm run dev即可启动项目。

　　当项目显示下入即成功了。

　　

 

 

　　

 

　　个人学习分享，不喜勿喷～