npm+webpack+babel+react安装
1.首先要安装 Node.js, Node.js 自带了软件包管理器 npm
2.在项目文件目录下生成package.json
3.用 npm 安装 Webpack
此时 Webpack 已经安装到了全局环境下,通常我们会将 Webpack 安装到项目的依赖中,这样就可以使用项目本地版本的 Webpack。
4.用 npm 安装 模块加载器(loader)
将 style-loader css-loader 安装到项目的依赖中
5.用 npm 安装 html-webpack-plugin
6.用 npm 安装 webpack-dev-server
7.用 npm 安装 babel-cli: babel转码器
8.用 npm 安装 babel-preset-es2015
9.用 npm 安装 babel-loader
10.用 npm 安装 react
11.用 npm 安装 react-hot-loader
11.在项目文件目录下创建.babelrc文件
12.在项目文件目录下创建example文件夹,并在其下面创建如下文件
index.jsx:
app.jsx:
13.在项目文件目录下建立webpack.config.js
14.webpack打包
此时项目目录下将会生成example_build文件夹,其内部也生成build.js 和 index.html文件,
15.webpack-dev-server 热加载
此时在浏览器中打开http://localhost:8080/,将会看到example_build下index.html页面内容。
这时,修改example下的index.jsx内容,页面将会自动刷新;修改exampleg下的app.js内容,页面将会局部刷新。