webpack-dev-server.js 服務器配置說明

connect-history-api-fallback 

• 使用：

    var app = express()
    var histroy = require('connect-history-api-fallback')
    app.use(histroy())

• 做用：

vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，因而當 URL 改變時，頁面不會從新加載。

若是不想要很醜的 hash，咱們能夠用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須從新加載頁面。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

當你使用 history 模式時，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看 ， 不過這種模式要玩好，還須要後臺配置支持。由於咱們的應用是個單頁客戶端應用，若是後臺沒有正確的配置，當用戶在瀏覽器直接訪問 http://oursite.com/user/id 就會返回 404

 

connect-history-api-fallback 就是解決這個問題的

 

 

webpack-dev-middleware 

• 使用：

var devMiddleware = require('webpack-dev-middleware')(compiler, {
publicPath: webpackConfig.output.publicPath,
    stats: {
        colors: true,
        chunks: false
    } 
})
app.use(devMiddleware)

• 做用：

webpack-dev-middleware是一個處理靜態資源的中間件 ，webpack-dev-server是一個小型的Node.js Express服務器,它也是用webpack-dev-middleware來處理webpack編譯後的輸出

 

webpack-hot-middleware 熱更新

• 使用：

  var compiler = webpack(webpackConfig)

var hotMiddleware = require('webpack-hot-middleware')(compiler)
compiler.plugin('compilation', function (compilation) {
    compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
        hotMiddleware.publish({ action: 'reload' })
        cb()
    })
})
app.use(hotMiddleware)

//須要在webpack.config.js 配置 plugins
plugins:[
　　...,
　　new webpack.optimize.OccurrenceOrderPlugin(),//根據模塊調用次數，給模塊分配ids，常被調用的ids分配更短的id，使得ids可預測，下降文件大小
　　new webpack.HotModuleReplacementPlugin,
　　new webpack.NoErrorsPlugin()
]

• 做用：

webpack-hot-middleware是一個結合webpack-dev-middleware使用的middleware，它能夠實現瀏覽器的無刷新更新

 

http-proxy-middleware 跨域請求

• 使用：

var proxyMiddleware = require('http-proxy-middleware')
app.use('/api',proxyMiddleware({
    target:'http://10.143.170.85:18003/mobilepos/pos/common.do?',
    changeOrigin:true
}))

• 做用：

代理插件，實現跨域兼容，在開發環境中，須要本地開啓服務器，若是須要請求接口，例如上面的 http://10.143.170.85:18003 ，那麼會有跨域，請求失敗，使用該插件後，直接 /api 就能夠訪問

 

項目直接加載靜態文件

• 業務場景：

在項目直接加載靜態文件，例如：http://localhost:8081/src/common/images/icon-query.png ，會加載失敗

• 解決方案：

使用Express內置的中間函數 express.static

• 使用方法1：

app.use(express.static('public')); // 就能夠加載 public目錄下的文件了
http://localhost:3000/images/kitten.jpg //不須要把靜態目錄做爲URL的一部分

• 使用方法2：

爲了給靜態資源文件建立一個虛擬的文件前綴(實際上文件系統中並不存在) ，能夠使用 express.static 函數指定一個虛擬的靜態目錄，就像下面這樣： app.use('/static', express.static('public')); http://localhost:3000/static/images/kitten.jpg