1、检查是否安装了node和npm：
node -v
npm -v
node和npm的版本
2、切换进刚刚新建的文件夹05-09里面，进行npm项目的初始化：
npm init
3、安装项目的依赖包：
为了加快下载速度，可以设置淘宝镜像：
npm install -g cnpm --registry=https://registry.npm.taobao.org
下面开始安装依赖包：
cnpm install --save react react-dom babelify babel-preset-react babel-preset-es2015 babel-loader
使用了--save就可以在配置文件package.json中看到相关信息了：
4、安装webpack：
全局安装：
cnpm install -g webpack
cnpm install -g webpack-dev-server
在05-09根目录下安装：
cnpm install --save webpack
cnpm install --save webpack-dev-server
配置文件webpack.config.js如下：
webpack.config.js
5、在05-09文件夹下面新建index.html和index.js：
目录如下：（注意bundle.js是后来生成的）
content
index.html如下：
index.html
index.js如下：
index.js
6、可以看到webpack生成的是bundle.js文件，下面实现webpack的热加载：
打开一个cmd，在根目录下输入webpack --watch
打开另一个cmd，在根目录下输入webpack-dev-server
在浏览器中输入http://localhost:8080/webpack-dev-server/
此时在index.js中修改保存，浏览器页面可以自动刷新页面。
网友评论