Webpack+Babel+React的快速搭建

首先是Package.json

{
  "name": "HelloWorld",
  "version": "0.1.0",
  "description": "Hello World to React and Webpack",
  "main": "./app/index.js",
  "scripts": {
    "dev": "webpack-dev-server --progress --profile --colors --hot --inline",
    "build": "cross-env NODE_ENV=production webpack --progress --colors --config webpack.production.config.js",
    "test": "test"
  },
  "author": "Zeyu Feng",
  "license": "MIT",
  "dependencies": {
    "autoprefixer-loader": "^3.2.0",
    "babel-core": "^6.14.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.14.0",
    "babel-preset-react": "^6.11.1",
    "babel-preset-react-hmre": "^1.1.1",
    "cross-env": "^3.1.3",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.22.0",
    "jshint": "^2.9.3",
    "jshint-loader": "^0.8.3",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "node-sass": "^3.10.0",
    "react": "^15.3.2",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.1"
  },
  "devDependencies": {
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-stage-0": "^6.5.0",
    "bootstrap": "^3.3.7",
    "jquery": "^3.1.0",
    "lodash": "^4.16.0",
    "moment": "^2.15.0",
    "react-bootstrap": "^0.30.3",
    "react-dnd": "^2.1.4",
    "react-dnd-html5-backend": "^2.1.2",
    "react-dom": "^15.3.2",
    "react-intl": "^2.1.5",
    "react-redux": "^4.4.5",
    "react-router": "^2.8.1",
    "react-thunk": "^1.0.0",
    "redux": "^3.6.0",
    "redux-thunk": "^2.1.0",
    "redux-simple-router": "^2.0.4"
  }
}

然后是webpack.config.js，使用webpack-dev-server, hot-reload进行服务器的生成，假如babel和一系列的loader

var webpack = require('webpack');
var path = require('path');

var config = {
  devtool: 'eval-source-map',
  devServer: {
    historyApiFallback: true,
    hot: true,
    inline: true,
    progress: true,
    contentBase: './dist'
  },
  entry: [
    'webpack/hot/dev-server',
    'webpack-dev-server/client?http://localhost:8080',
    path.resolve(__dirname, 'app/index.js')
  ],
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  resolve: {
    extensions: ['', '.js', 'jsx']
  },
  module: {
    loaders: [
      { test: /\.jsx?$/, loader: "babel", exclude: /node_modules/ },
      { test: /\.(css|scss)$/, loader: "style!css!autoprefixer!sass" }, 
      { test: /\.less$/, loader: 'style!css!autoprefixer!less' },
      { test: /\.woff2{0,1}$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
      { test: /\.(otf|eot|svg|ttf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' },
      { test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'}
    ]
  },
  jshint: {
    "esnext" : true
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin({minimize: true}),
    new webpack.optimize.OccurenceOrderPlugin()
  ]
}

module.exports = config;

添加一个webpack.production.config.js，假如production配置，取出webpack-dev-server:

var webpack = require('webpack');
var path = require('path');

var config = {
  devtool: 'eval-source-map',
  entry: path.resolve(__dirname, 'app/index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  resolve: {
    extensions: ['', '.js', 'jsx']
  },
  module: {
    loaders: [
      { test: /\.jsx?$/, loader: "babel", exclude: /node_modules/ },
      { test: /\.(css|scss)$/, loader: "style!css!autoprefixer!sass" }, 
      { test: /\.less$/, loader: 'style!css!autoprefixer!less' },
      { test: /\.woff2{0,1}$/, loader: 'url-loader?limit=10000&mimetype=application/font-woff' },
      { test: /\.(otf|eot|svg|ttf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader' },
      { test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'}
    ]
  },
  jshint: {
    "esnext" : true
  },
  plugins: [
    new webpack.DefinePlugin({
      '__DEV__': false,
      'process.env': {
          'NODE_ENV' : JSON.stringify('production')
      }
    }),
    new webpack.optimize.UglifyJsPlugin({minimize: true}),
    new webpack.optimize.OccurenceOrderPlugin()
  ]
}

module.exports = config;

下来是.babelrc的配置：(注意hmre是只用在development中的，配合hot-reload使用，所以只在development下使用)

{
  "presets" : [ "es2015", "react", "stage-0" ],
  "plugins" : [ "transform-decorators-legacy" ],
  "env": {
    "development" : {
      "presets" : ["react-hmre"]
    }
  }
}

这里使用的是React+Redux的框架，我比较喜欢这个结构，感觉清晰一点：

 我比较喜欢每一个模块文件夹下面包含一个index文件，和其他的的各种文件。index文件只用来把其他的文件收集到一起，并export。这样子的好处是，如果需要多个不同的，可以引入index一个就能获取所有的。如果只需要一个文件下面的方法，那么只用单独引入那一个文件就好，减少不必要的引入。