手动配置webpack+react

原创 snafm 随笔 总结 223阅读 2018-04-09 18:04:42 举报
  1. node.js安装,node官网自行下载:https://nodejs.org/en/download/

2.新建一个项目文件夹,如:myReact

3.进入myReact文件夹,打开命令行或者git Bash输入命令:npm init,一路回车,会在当前文件夹自动生成package.json文件:

注意:scripts里的"start": "webpack"是配置快捷命令的,这样后面我们就可以直接用npm start来代替webpack命令执行项目了,不配置也可以。

4.在myReact文件夹下新建src文件夹,里面放源文件,再新建一个webpack.config.js的配置文件,文件内容:

entry是指定项目入口文件,output是打包的目的文件夹,module是用于转化非js文件为模块的配置(test是要转化哪类文件,loader是用哪种loader来转换)。

5.在myReact里打开命令行,安装依赖模块:

6.在src里新建index.js入口文件,简单的写点内容:

7.在myReact里新建index.html文件:

8.在myReact里运行npm start,可以看到新生成了dist文件夹,里面有bundle.js文件。
注意这里script引用的路径是"./bundle.js"
这里可能会报错,如:

说的很明显,就是webpack-cli没安装,npm install webpack-cli --save-dev安装一下就好了,还有这样的:

这种就是node版本太低了,更新一下node版本,windows系统去官网下载一个覆盖原版本就好,Mac下可以用

更新版本。
接下来我们开始配置webpack热加载:
1.安装webpack-dev-server

2.添加package.json配置项(scripts里添加):

这里的--open就是用来自动打开浏览器的
3.webpack.config.js里添加配置

4.打开命令行执行:run start,成功打开浏览器
http://localhost:8080/ 修改保存会自动刷新,接下来就可以好好开发你的react项目啦
项目打开以后报错:

这是因为上面index.js的代码里有一个错,Render改成render就行了

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复