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