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

没有更多推荐了,返回首页

私密
私密原因:
请选择设置私密原因
  • 广告
  • 抄袭
  • 版权
  • 政治
  • 色情
  • 无意义
  • 其他
其他原因:
120
出错啦
系统繁忙,请稍后再试

关闭