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

阅读更多
文章标签: webpack4环境配置
个人分类: react
想对作者说点什么? 我来说一句

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

不良信息举报

webpack4环境配置react(简化)

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭