webpack从0开始搭建一个react开发环境

1、创建一个空的文件夹，随便在哪个位置
2、在这个文件夹上打开cmd窗口，执行npm init初始化环境

3、安装webpack相关内容
npm i webpack webpack-cli webapack-dev-server html-webpack-plugin --save-dev

• webpack 和 webpack-cli 是搭建 webpack 环境必须的, 不多讲
• webpack-dev-server 可以在开发环境搭建一个本地的服务器
• html-webpack-plugin 用来打包html文件

4、安装react相关
npm i react react-dom --save-dev

5、安装需要的babel插件
npm install babel-loader@7 babel-core babel-preset-es2015 babel-preset-react --save-dev

6、安装css相关插件
npm i css-loader style-loader file-loader url-loader --save-dev

7、创建配置文件，在最开始创建的空文件下（现在已经有文件了）创建一个webpack.config.js（配置）文件，再创建一个 index.html 和 一个main.js 文件（当做入口文件）
1、 注意index.html内要有一个需要有一个 id 为 root 的 div, 当做根节点（不用我说为什么了吧）

2、根组件内的内容（main.js）

下面关于配置文件内的内容，去webpack官方网站找到配置内容复制

然后记得把文件改成自己刚才创建的main.js文件

继续在该文件内引入文件头部以及plugin的配置内容

配置babel部分（仍在这个文件内），依旧在官网找到babel部分
把整个module复制粘贴到我们的文件内(因为下方配置有点不兼容，需要我们做一点更改)

更改之处：

配置css和图片样式

最后为了运行方便，我们在配置一个热更新内容,老规矩，找到直接cv大法

配置上热更新的指令

最后的最后再加一个配置文件的全图


完结，可以愉快的开始编程了！！！！