webpack4环境配置react（简化）

1.新建项目文件夹

2.cmd进入文件夹 输入指令

cnpm init

注：事先配置了淘宝镜像源

此时项目目录下会创建一个package.json

3.在项目中安装webpack和webpack-cli和webpack-dev-server

cmd下输入

cnpm install webpack webpack-cli webpack-dev-server --save

4.在项目文件目录下新建index.html，新建文件夹src，在src中新建文件index.js

注：webpack4默认入口文件为src中的index.js，可以在webpack.config.js中修改

5.安装react

cnpm install react react-dom

6.安装babel

cnpm install babel-loader@next @babel/core @babel/preset-react --save

7.项目目录下新建配置文件webpack.config.js

配置文件如图

8.使用webpack打包一下

发现在项目目录下生成了一个文件夹dist，文件夹里生成一个文件main.js

这是webpack4默认的打包输出文件，把它引入到index.html中

到这里使用webpack4配置react环境已经完成

尝试使用react

webpack打包

打开index.html

实现热加载

cmd输入

npx webpack-dev-server --mode development --output-public-path dist

打开http://localhost:8080/即可

注：8080为默认端口，可以在webpack.config.js中修改