1、检查是否安装了node和npm:
node -v
npm -v
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如下:
5、在05-09文件夹下面新建index.html和index.js:
目录如下:(注意bundle.js是后来生成的)
index.html如下:
index.js如下:
6、可以看到webpack生成的是bundle.js文件,下面实现webpack的热加载:
打开一个cmd,在根目录下输入webpack --watch
打开另一个cmd,在根目录下输入webpack-dev-server
在浏览器中输入http://localhost:8080/webpack-dev-server/
此时在index.js中修改保存,浏览器页面可以自动刷新页面。