webpack dev server + rails 配置

首先安装所需要的package

install --save-dev webpack-dev-server react-hot-loader

1. webpack-dev-server 起一个简单的express server。具有watch rebuild和refresh(在浏览器中)的功能。

2. react-hot-loader 所谓的热加载，哎！刚查资料的时候被这名字搞得满迷糊的，尤其是中文翻译，也不带解释具体含义的，其实就是相比较于整个页面的refresh，hot-reload在react的部分局部更新，保持了state的信息。

重新配置entry point

在每一个entry point都加入两个模块，具体看代码，这个我是集成部分我的development.config.js中的配置信息而成的，这里我有些具体rails+webpack。

var developmentConfig = require('./development.config.js'),
  _ = require('lodash'),
  webpack = require('webpack');

var hotEntries = ['webpack-dev-server/client?http://localhost:3542', 'webpack/hot/only-dev-server'];
var oldEntry = developmentConfig.entry;
var newEntry = {};
_.each(oldEntry, function(val, key) {
  newEntry[key] = hotEntries.concat(val);
});

其中要注意'webpack-dev-server/client?http://localhost:3542'这个是你要起的webpack dev server的地址，不要再加具体的asset路径，否则会有各种error，国外有篇文章加了路径，我照做错了。

修改output的publicPath

如果不是一个后台框架+webpack dev server，这个就是正常的路径就好了比如/assets等等。由于我们是后台的程序渲染的页面调用webpack dev server的js，所以这里要配置publicPath带domain，具体如下:

config.output.publicPath = 'http://localhost:3542/assets';

在webpack config 的 plugins中加入两个插件

代码如下：

config.plugins.push(new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin());

这里注意如果利用webpack-dev-server cli 并且加了--hot 这个选项，就不要在这里加入new webpack.HotModuleReplacementPlugin()这个插件了，否则会报Maximum call stack size exceeded错误。

配置js的loader加入react-hot

代码如下：

var babelQuery = {
    presets: ['es2015', 'stage-0', 'react'],
    plugins: ['transform-runtime']
  };

// react-hot 必须在所有的其他的loader之前
config.module.loaders[0] = {
        test: /.js$/,
        // 这里babel-loader使用的query string的语法形式
        loaders: ['react-hot', 'babel-loader?'+JSON.stringify(babelQuery)],
        exclude: /(node_modules|bower_components)/
      };

这里注意react-hot要放到第一个位置。否则报错。

配置一些dev server用devServer这个key

代码如下:

config.devServer = {
    publicPath: 'http://localhost:3542/assets',
    contentBase: "./public",
    hot: true,
    inline: true,
    headers: { "Access-Control-Allow-Origin": "http://localhost:3000", "Access-Control-Allow-Credentials": true }
  };

这里contentBase是告诉webpack dev server 用哪里的内容做静态资源服务。

注意：一个后台框架+webpack dev server，那么header中的Access-Control-Allow-Origin必须配成后台服务器的地址，不可以用*，Access-Control-Allow-Credentials必须是true。否则cors过不去呀。

最后在package.json中加一句命令吧

代码如下：

  "scripts": {
    "dev": "webpack --config config/webpack/development.config.js --watch --colors",
    "hot_dev": "./node_modules/.bin/webpack-dev-server-cors --config config/webpack/hot.config.js  --progress --inline --port 3542 --content-base public/"
  },