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内容,页面将会局部刷新。

05-07 11:38
查看更多