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/