webpack打包后的静态资源问题

情景：
使用webpack 打包前端应用后，图片和css、js 资源引用会出问题，
这源于开发环境的目录和生产环境的路径【url】不一样
好比，开发环境的url是：
http://localhost:8088/static/...

而生产环境的url是：
http://www.xxx.com/aaa/bbb/st...

其中【http://www.xxx.com/aaa/bbb/】是配置的生产环境路由。
指向express服务器。

两者区别，开发环境是放在域名的根目录，因此不存在引用路径变化的问题。
若是生产环境不作处理的话，图片等静态文件会自动在相对路径前添加域名。
好比：

在样式中写到：
background:url(abc.png)
这里会自动被转化为：
http://www.xxx.com/abc.png
然而，除非项目放在了域名根目录下，通常状况这是路径是不对的。

解决方案：
webpack 是个优秀的打包工具，确定有相关的配置的。
在build配置脚本中，就有相关配置项：

其中： index: path.resolve(__dirname, '../dist/index.html'),
表示，打包后的入口index.html文件存放的位置，这里表示，在dist目录下。
assetsRoot: path.resolve(__dirname, '../dist')
表示，打包后埔静态资源文件存放的根目录，表示一样是dist目录。
assetsSubDirectory: 'static',
表示静态文件打包后存放的子目录，'/static'
assetsPublicPath: '/',
这个表示静态资源部署后的公共路径。
假如应用路径是【http://www.xxx.com/aaa/bbb/】
那么这里就应该配置为'/aaa/bbb/'
若是须要传到cdn,则能够改为http://stacic.xxx.com/aaa/bbb/