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中修改