常見現象：明明開發環境顯示的好好地樣式，在生產環境就不生效了。
運行npm run build后查看生成的dist文件夾，我們可以看到，dist文件夾下未生成css樣式文件。
問題原因：
在webpack官方文檔中介紹了tree shaking :
Tree shaking is a term commonly used in the JavaScript context for dead-code elimination.
It relies on the static structure of ES2015 module syntax, i.e. import and export 翻譯過來就是： 樹抖動是JavaScript上下文中常用於消除死代碼的術語。 它依賴於ES2015模塊語法的靜態結構，即導入和導出
大致意思就是：webpack4中的tree shaking會默認移除javascript上下文中的未引用的代碼，用來達到減輕重量的思想，tree-shaking通過packge.json的‘sideEffects’屬性來判定哪個文件具有副作用。
當"sideEffects"：false時，項目中未被引用的文件會被移除判定均無副作用，就會把沒有被引用的代碼從環境中移除。
這也是造成生產環境樣式丟失的的關鍵所在。
（還有其他原因，有待后續補充）
如何解決？
既然已知了問題所在，那我們把css文件添加到'sideEffects'數組中，就可以看到頁面樣式在生產環境中顯示了。
//package.json //改前 "sideEffects":false; //改后 "sideEffects":[*.css"]
然后再build一下，就能夠看到css文件被打包了並且被引用到我們生成的index頁面中。