devServer.historyApiFallback

本來這玩意不值得寫一篇博客的，但是坑爹的是我在網上搜了一圈解決方案都不可行，webpack-dev-sever官網的文檔使用說明還有誤導性。最後還是自己慢慢撥出來的。

問題的產生

browserHistory如何設置路由

react-router有3種路由方式：貼近實際路由的browserHistory，我們熟悉的兼容性很好的hashHistory，還有我還沒了解的createMemoryHistory。

browserHistory使用的是h5 history api，給用戶看到的瀏覽器url與普通的path沒有區別，其實路由都是交給js來處理的，後端只用把所有根路徑下子path的路由都指向同一個文件，交由js根據path處理展示內容，js通過history.push、history.repalce等api處理鏈接跳轉，其實用戶看到的只是url被repalce，頁面並沒有刷新，js做了動態替換了dom，獲取數據等等，但是視覺上感覺頁面跳轉了，速度更快，除了數據展示部分頁面沒啥閃爍，當然你也可以做一些漸入漸出的特效讓“頁面跳轉”看起來更自然，扯遠了。。。

webpack-dev-sever如何定位文件

browserHistory的路由跟普通url path部分沒啥2樣，通過’/’分割路徑。

webpack-dev-sever是靜態資源服務器，他會通過你的output配置去讀取文件，通過’/’分割以文件查找的模式匹配文件。這樣自然就產生問題了，因爲你配置的路由並不是實際存在的文件，根據文件查找的方式是找不到的，只會404。

解決方案

webpack.config.js配置

webpack有一個選項devServer用於協助wepack-dev-server支持h5 history api的路由。於是你可以類似這樣的配置：

module.exports = {
    entry: "./src/app/index.js",
    output: {
        path: path.resolve(__dirname, 'build'),
        publicPath: 'build',
        filename: 'bundle-main.js'
    },
    devServer: {
        historyApiFallback:{
            index:'build/index.html'
        },
    },
    //其他的配置省略
};

output.publicPath告訴webpack從該路徑下尋找文件，在這裏也就是把build當成文件系統入口，根路徑。

devServer.historyApiFallback的意思是當路徑匹配的文件不存在時不出現404,而是取配置的選項historyApiFallback.index對應的文件。

這樣開啓webpack-dev-server後會看到終端：

 

ps:我就是修改配置項看終端信息才知道這2個參數是這個意思，坑爹的官網解釋就是個坑，遇到問題已經不能只靠官網和stackoverflow了，還是多自己研究原理和現象吧。

同一個項目配置多個單頁面系統入口

我有需求要在同一個項目中開啓2套單頁面體系，一套是給用戶用的平臺，一套是給管理員用的管理後臺。並不想每次啓動2個服務器去開發，所以需要搞定一套webpack配置，能運行2個入口：

module.exports = {
    entry: {
        "main": "./src/app/index.js",
        "admin": "./src/admin/index.js"
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        publicPath: 'build',
        filename: 'bundle-[name].js'
    },
    devServer: {
        historyApiFallback:{
      index:'build/index.html',
      rewrites: [
          { from: /^\/admin/, to: 'build/admin.html' }
      ],
    },
    },
    //其他的配置省略
};

這個配置entry配置了2個入口。

output配置生成了2個文件，[name]是定義的entry的鍵名.

historyApiFallback中的配置依舊是404頁面導入到build/index.html這個用戶系統的主入口，但是rewrites配置了重定向規則，from指定如果路徑能匹配/^\/admin/，則指向build/admin.html入口html文件。

坑爹的官網

http://webpack.github.io/docs/webpack-dev-server.html#the-historyapifallback-option

 

當然這也有可能不是官網文檔的信息有問題，有可能是我webpack-dev-server是1.10.1，而官網最新版是1.13的問題。

我按官網這種將historyApiFallback.index和output.publicPath配置爲同一個路徑，webpack-dev-server是不知道去找這個文件夾下的index.html或者其他html文件的。

還有一個地方看官網文檔納悶了一下，順便解釋。

• module.exports透出配置是使用終端CLI啓動（或者類似npm script配置利用npm run啓動這類命令行啓動）webpack-dev-server。

  module.exports = { // configuration };

• webpack({})這種方式是給node.js api使用的。

    var WebpackDevServer = require("webpack-dev-server");
    var webpack = require("webpack");
  	
    var compiler = webpack({
      // configuration
    });
    var server = new WebpackDevServer(compiler, {
      // webpack-dev-server options
  	
    });