1. 全局安装webpack-cli: npm install -g webpack-cli
2. 将安装webpack-cli后对应的文件夹拷贝到指定目录
拷贝源:C:\Users\xxxxxx\AppData\Roaming\npm\node_modules\webpack-cli
拷贝目的:C:\Users\xxxxxx\AppData\Roaming\npm\node_modules\cli-angularjs\node_modules\webpack-cli
其中xxxxxx为各自的计算机用户名
软件开发的脚手架的概念是从建筑学术语上引申而来。在建筑学上,脚手架指施工现场为工人操作并解决垂直和水平运输而搭设的各种支架。你见过大楼施工吧?在大楼外墙围的那圈支架就是其中一种脚手架。在软件开发上(当然也包括前端开发)的脚手架指的就是:有人帮你把这个开发过程中要用到的工具、环境都配置好了,你就可以方便地直接开始做开发,专注你的业务,而不用再花时间去配置这个开发环境,这个开发环境就是脚手架。
比如vue.js就有个vue-cli脚手架,基于node.js的开发环境,作者帮你把开发环境大部分东西都配置好了,你把脚手架下载下来就可以直接开发了,不用再考虑搭建这些工具环境。
一、安装最新的node.js
原博文是这样写说的
npm install -g n //首先安装n模块
n stable //升级node.js到最新稳定版
n 5.0.0 //或者指定版本升级
node -v //检查更新是否成功
我自己是去重新下了一个最新版的node.js
二、修改npm源为淘宝源
npm config set registry “”
加快npm下载速度,不这样做的话npm install会卡很久。
三、安装脚手架
首先确保自己安装了nodejs,然后全局安装yeoman
npm install -g yo
然后直接安装脚手架
npm install -g generator-reactpackage123456
四、创建React项目
在合适的地方新建一个文件夹,在文件夹下运行:
yo reactpackage12
然后就会在此目录下生成以下目录结构:
├── data
│ └── test.json├── src
│ ├── components
│ │ └── App.js│ ├── images
│ │ └── yeoman.png│ ├── styles
│ │ └── app.scss│ ├── vendor
│ │ └── jquery.js│ ├── views
│ │ └── home.html├── node_modules
├── index.html├── package.json└── webpack.config.js1234567891011121314151617181920
五、调试打包React项目
然后使用以下命令:
npm run dev //项目开发过程使用,启动服务,实时刷新npm run build //开发完成之后打包文件(js、css分开打包)123
六、测试预览项目
本项目默认监听端口是8888,所以在浏览器输入 http://localhost:8888,或者index.html->右键打开方式->chrome 就能看到效果了
如果执行上述命令提示错误:Error: getaddrinfo ENOTFOUND localhost,在host文件里面添加127.0.0.1 localhost即可
监听端口和实时刷新的功能都能在webpack.config.js文件中修改配置123