react+webpack+babel+eslint+redux+react-router+sass 环境快速搭建

本文中的例子支持webpack-dev-server自动刷新及react热替换，使用了redux管理state，用react-router切换路由，用babel实现ES6语法书写，同时支持async/await书写，eslint代码检测，及sass的使用

1.搭建前文档结构：

  

 assets 用来存放css 及 图片等资源

 components存放组件

 js 用来存放js文件

 页面主文件是 index.html

 不用纠结文件夹结构，只要不涉及团队合作，这玩意儿就像自己的女人，想咋睡咋睡，想咋组织就咋组织 大致如此

2.webpack配置文件的书写

var webpack=require('webpack');
var path=require('path');
var DashboardPlugin = require('webpack-dashboard/plugin');//一款很屌的插件，用了你就知道了
module.exports={
    entry:{ //多文件入口以及配置dev server及热替换
        app:[path.resolve(__dirname, './js/index.js'),'webpack/hot/dev-server.js','webpack-dev-server/client?http://0.0.0.0:8080'],
        vendor:['react']
    },
    output:{ //多文件输出 注意[name]这种写法
        publicPath:'/build',
        filename:'[name].js'
    },
    module:{
        loaders:[  //最新loader的写法
            {test:/.js?$/,loaders:['babel','eslint'],exclude: /node_modules/},
            {test:/.jsx?$/,loaders:['babel','eslint'],exclude: /node_modules/},
            {test: /.(jpg|png|gif)$/, loader: "url?limit=8192",exclude: /node_modules/},
            {test:/.(scss|css)?$/,loader:'style!css!sass',exclude: /node_modules/}
        ]
    },
    resolve:{  //配置node_modules的地址、文件名省略及文件路径简写
        root:'/Users/****/mywork/rwp/node_modules',
        extensions:['','.js','.jsx','.json','.scss'],
        alias:{
            listCss:path.join(__dirname,'./assets/css/list'),
            publicCss:path.join(__dirname,'./assets/css/public'),
            bkCss:path.join(__dirname,'./assets/css/bk'),
            coverCss:path.join(__dirname,'./assets/css/cover'),
            listCp:path.join(__dirname,'./components/list'),
            bkCp:path.join(__dirname,'./components/bk'),
            cbCp:path.join(__dirname,'./components/cb'),
            publicCp:path.join(__dirname,'./components/public'),
            coverCp:path.join(__dirname,'./components/cover')
        }
    },
    eslint:{//eslint配置文件
        configFile:"./.eslintrc.js"
    },
    plugins:[
        new webpack.NoErrorsPlugin(), //防错误打断程序插件
        new DashboardPlugin(),
        new webpack.optimize.CommonsChunkPlugin('vendor',  'vendor.js')
    ]
}

以上是webpack.config.js,用于生产环境的配置文件，下面这个是一个比较粗糙的生产环境配置文件，待优化

var webpack=require('webpack');
var path=require('path');
var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;//代码压缩插件
var CopyWebpackPlugin = require('copy-webpack-plugin');//文件拷贝插件
module.exports={
    entry:{
        "./build/app":path.resolve(__dirname, './js/index.js'),
        "./build/vendor":['react']
    },
    output:{
        publicPath:'/',
        path:path.resolve(__dirname,'../../package'),
        filename:'[name].js'
    },
    module:{
        loaders:[
            {test:/.js?$/,loaders:['babel','eslint'],exclude: /node_modules/},
            {test:/.jsx?$/,loaders:['babel','eslint'],exclude: /node_modules/},
            {test: /.(jpg|png|gif)$/, loader: "url?limit=8192",exclude: /node_modules/},
            {test:/.(scss|css)?$/,loader:'style!css!sass',exclude: /node_modules/}
        ]
    },
    resolve:{
        root:'/Users/****/mywork/rwp/node_modules',
        extensions:['','.js','.jsx','.json','.scss'],
        alias:{
            listCss:path.join(__dirname,'./assets/css/list'),
            publicCss:path.join(__dirname,'./assets/css/public'),
            bkCss:path.join(__dirname,'./assets/css/bk'),
            coverCss:path.join(__dirname,'./assets/css/cover'),
            listCp:path.join(__dirname,'./components/list'),
            bkCp:path.join(__dirname,'./components/bk'),
            cbCp:path.join(__dirname,'./components/cb'),
            publicCp:path.join(__dirname,'./components/public'),
            coverCp:path.join(__dirname,'./components/cover')
        }
    },
    plugins:[
        new webpack.optimize.DedupePlugin(),//文件内容深度去重
        new uglifyJsPlugin({
            compress: {
                warnings: false
            }
        }),
        new CopyWebpackPlugin([
            { from: 'index.html', to: 'index.html' }
        ])
    ]
}

关于配置文件的详细叙述及各字段意思请大家查看官网：

https://webpack.github.io/docs/configuration.html#module-loaders

下面是package.json

{
  "name": "rwp",
  "version": "1.0.0",
  "description": "this is a test project",
  "main": "server.js",
  "scripts": {
    "build": "webpack --progress --profile --colors --config webpack.production.config.js",
    "start": "webpack-dashboard -- webpack-dev-server --hot --progress --colors"
  },
  "keywords": [
    "test"
  ],
  "babel": {
    "presets": [
      "es2015",
      "react"
    ]
  },
  "author": "jhone lee",
  "license": "ISC",
  "dependencies": {
    "babel-runtime": "^6.11.6",
    "body-parser": "1.15.x",
    "copy-webpack-plugin": "^3.0.1",
    "express": "4.x",
    "jquery": ">=2.x",
    "react": ">=15.2.x",
    "react-redux": "^4.4.5",
    "react-router": "2.6.x",
    "react-router-redux": "^4.0.5",
    "redux": "^3.5.2",
    "redux-logger": "^2.6.1",
    "redux-thunk": "^2.1.0"
  },
  "devDependencies": {
    "babel": "6.x",
    "babel-core": "6.x",
    "babel-eslint": "^6.1.2",
    "babel-loader": "*",
    "babel-plugin-transform-runtime": "^6.12.0",
    "babel-polyfill": "^6.13.0",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-stage-0": "^6.5.0",
    "babel-runtime": "^6.11.6",
    "css-loader": "*",
    "eslint": "^3.3.1",
    "eslint-loader": "^1.5.0",
    "eslint-plugin-react": "^5.2.2",
    "file-loader": "^0.9.0",
    "jsx-loader": "^0.13.2",
    "node-sass": "^3.8.0",
    "react-dom": "^15.2.1",
    "redux": "^3.5.2",
    "redux-devtools": "^3.3.1",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "1.13.1",
    "webpack-dashboard": "^0.1.7",
    "webpack-dev-server": "1.4.x"
  }
}

这里需要注意的script里面需要执行的命令：

npm run build 会运行生产环境的config文件

npm start 会运行开发环境的config文件

后面至于 redux及react-router怎么用，以及.babelrc  和 .eslintrc怎么配置不在本文的讨论范畴

仅粘出我的 两个rc文件

module.exports = {
    "parser":"babel-eslint",
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [
            "warn",
            4
        ],
        "linebreak-style": [
            "warn",
            "unix"
        ],
        "quotes": [
            "warn",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ],
        "no-unused-vars":[
             "warn", 
             { 
                "vars": "all", 
                "args": "after-used" 
             }
        ],
        "no-console":[
            "error",{
                "allow":["log","error","warn"]
        }],
        "no-constant-condition":[
            "warn",{
                "checkLoops":false
            }
        ],
        "no-fallthrough":["warn",{
            "commentPattern": "break[\s\w]*omitted"
        }]
    }
};

以上为 .eslintrc

{
 "presets": [ "es2015", "stage-0","react"],
 "plugins": [
    ["transform-runtime", {
      "polyfill": false,
      "regenerator": true
    }]
  ]
}

以上为 .babelrc

至于react-router及redux怎么用，以后有时间再说