适用于webpack 4.x
配置一个React的开发环境在我看来是比较麻烦的,需要比较多的配置。
写一篇博文统计一下,让自己记住,也希望帮助到别人:
- webpack
- webpack-cli
- webpack-dev-server
- react
- react-dom
- babel-loader@next
- @babel/core
- @babel/preset-react
- style-loader
- css-loader
这里可能是必须的,在初始化(npm init -y)之后使用npm i -D {name}去安装他们,然后在webpack.config.js文件中写入以下内容:
1 | var debug = process.env.NODE_ENV !== "production"; |
输入1
webpack-dev-server --mode development --output-public-path dist --inline --hot
来启动测试服务器,就可以进行调试了。
工具推荐
Brackets 一个即时预览功能比较OK的文件编辑器
第三方介绍: http://caibaojian.com/brackets-editor.html
插件推荐:http://caibaojian.com/bracket-plugins.html
优点:即时预览能力强,代码提示较好
缺点:插件少,界面UI单调。
Axure 网页设计简单化软件
汉化地址:http://www.iaxure.com/menupage/download.html
教程:https://www.axure.com.cn/category/axure/
优点:设计简单,样式修改简单
缺点:生成的网页不可直接使用,只可用于预览效果(不绝对)
Pinegrow 网页设计简单化软件
优点:精致小巧,功能强大,样式与内容修改简单
缺点:小众,付费
Parcel 简单的webpack脚手架
优点:0配置,新手如果不想花费精力在烦人的配置上,可以使用
缺点:无配置,拓展难
Box Shadow 阴影效果在线调试
网站:http://tools.jb51.net/aideddesign/css3_boxshadow
CSS to React -> CSS样式转React样式
网站:https://staxmanade.com/CssToReact/
Browsersync -> 网页即时预览工具
更多
如果你想要找到更多对你开发有帮助的东西的话,去这里