1、确保安装了 Node.js，首先创建一个目录，初始化 npm
mkdir cat-design && cd cat-design
npm init
2、本地安装 webpack
npm install -g webpack //全局安装
npm install webpack --save-dev //安装到你的项目目录
npm install webpack-dev-server --save-dev //开发环境使用的一个轻量的node.js express服务器
3、安装依赖
-
生产环境依赖
npm install react —save
npm install react-dom —save
npm install react-router -save //路由 -
开发环境依赖 loader
npm install babel-core --save-dev
npm install babel-loader --save-dev //webpack使用
npm install babel-preset-env --save-dev //解析ES6
npm install babel-preset-react --save-dev //react转码，解析jsx
npm install url-loader --save-dev //把较小的图片转换成base64的字符串内嵌在生成的文件里 -
开发环境依赖 plugin
npm install babel-plugin-transform-runtime --save-dev //比babel-polyfill更灵活
npm install extract-text-webpack-plugin --save-dev //ExtractTextPlugin：分离CSS和JS文件
npm install html-webpack-plugin —-save-dev //webpack打包生成html页的插件
npm install babel-plugin-transform-class-properties --save-dev //解析class中的properties，原来class中定义方法或者变量不可以写init = () => {}, 只能写成init(){}
npm install babel-plugin-transform-decorators-legacy --save-dev //代码中使用decorators要使用babel的插件，官方目前插件还不支持，使用第三方的 -
CSS
npm install style-loader css-loader --save-dev
npm install less-loader less --save-dev //css预处理器
4、配置 babel，在根目录下新建 .babelrc文件
{
"presets": ["env", "react"],
"plugins": ["transform-runtime"]
}
5、配置 webpack，在根目录下新建 webpack.config.js，如果想使用es6去写配置，那么把文件名改为 webpack.config.babel.js
6、配置 .gitignore
node_modules/
build/
dist/
.idea
npm-debug.log
yarn-error.log