React基本配置及简单使用

进入正题

文件目录如下:

React基本配置及简单使用

注意:在webpack 4.x 中,有一个很大的特性,就是 约定大于配置,默认的打包入口路径就是 src -> index.js
需要配置的文件: webpack.config.js

React基本配置及简单使用

index.html

React基本配置及简单使用

index.js

React基本配置及简单使用
React基本配置及简单使用

初始化 npm init -y

React基本配置及简单使用

安装webpack npm i webpack -Dcnpm i webpack-cli -D

React基本配置及简单使用

安装 cnpm i webpack-dev-server -D

`
React基本配置及简单使用

安装插件: cnpm i html-webpack-plugin -D

React基本配置及简单使用

调试:npm run dev

React基本配置及简单使用

安装插件:cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
安装插件:cnpm i babel-preset-env babel-preset-stage-0 babel-preset-react -D
配置 .babelrc 文件

React基本配置及简单使用

注意此时运行有问题,因为 babel-loader 最新版的问题,我们可以在此修改版本为:`7.1.2`版本,删除 node_modules 然后 cnpm i

React基本配置及简单使用

最终结果部分展示:

React基本配置及简单使用