依赖

node.js

https://nodejs.org/en/
下载并安装LTS版

创建项目

在项目目录下shift+右击打开命令窗口

npm init -y

淘宝npm镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

webpack

cnpm install webpack -g
cnpm install webpack --save-dev
cnpm install webpack-dev-server -g//热更新插件

项目目录下新建webpack.config.js文件，范例如下

var webpack = require('webpack');
module.exports = {
//入口文件
  entry : {
    "L1-bundle": "./L1-entry",
    "L2-bundle": "./L2-entry",
    "L3-bundle": "./L3-entry",
    "M-bundle": "./M-entry"
  },
//出口文件
  output: {
    path: __dirname,
    filename: "./html/[name].js"//此处[name]为入口文件中的key值
  },
//加载lorders
  module: {
    loaders: [
     //填入配置文件
    ]
  }
};

安装并配置webpack loaders

css预处理

cnpm install --save -dev css-loader style-loader//处理css中路径引用等问题&动态把样式写入css

module: {
  loaders: [
    {test: /\.css$/, loader: "style!css?sourceMap!postcss"},
    {test: /\.less$/, loader: "style!css!less|postcss"},
    {test: /\.scss$/, loader: "style!css!sass|postcss"}
  ]
}

js处理

cnpm install --save-dev babel-core babel-preset-es2015 babel-loader jsx-loader babel-preset-react

module.exports ={
 entry: './entry.js',
 output: { path: __dirname,
 filename: 'bundle.js'
 },
 module: {
loaders: [
  {test: /\.js$/, loader: "babel", exclude: /node_modules/},
  {test: /\.jsx$/, loader: "jsx-loader"}
  }
};

新建一个名字为.babelrc的文件

{
  "presets": ["es2015","react"],
  "plugins":["antd"]
}

文件处理

cnpm install --save-dev file-loader

module: {
  loaders: [
    {
      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
      loader: 'file'
      },
  ]
}

图片处理

cnpm install url-loader --save-dev

module: {
  loaders: [
    {test: /\.(jpg|png)$/, loader: "url?limit=8192"},
  ]
}

gulp

cnpm install gulp -g
cnpm install gulp --save-dev

项目目录下新建gulpfile.js文件，范例如下

//导入工具包 require('node_modules里对应模块')
var gulp = require('gulp'), //本地安装gulp所用到的地方
    less = require('gulp-less');
 
//定义一个testLess任务（自定义任务名称）
gulp.task('testLess', function () {
    gulp.src('src/less/index.less') //该任务针对的文件
        .pipe(less()) //该任务调用的模块
        .pipe(gulp.dest('src/css')); //将会在src/css下生成index.css
});
 
gulp.task('default',['testLess', 'elseTask']); //定义默认任务 elseTask为其他任务，该示例没有定义elseTask任务
 
//gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数
//gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组) 
//gulp.dest(path[, options]) 处理完后文件生成路径

React

全局安装

cnpm install babel -g//编译器

安装

cnpm install react --save
cnpm install react-dom --save

React-Router

安装路由插件

cnpm install react-router --save

React-Modal

安装模态框插件

cnpm install react-modal --save