簡單說明原理：
使用babel-plugin-component實現按需引入、打包。
將webpack配置成多入口，保證最終打包的目錄結構符合babel-plugin-component插件的要求，實現按需加載
element源碼關於按需引入的研究：
1、build目錄中是cooking配置文件，cooking是餓了么前端研發的基於webpack的前端構建工具，我們使用原始的webpack實現。此處源碼忽略。
2、example中是element項目的例子存放，打開element網頁，可看見的項目入口。
3、packages目錄中，是所有的功能模塊，以alert模塊為例，分析目錄結構
alert模塊目錄，有一個index.js作為模塊入口，在入口處，引入src目錄中的主要組件，再對該組件進行拓展，增加install方法，我們知道，在對vue進行擴展，使用vue.use(...)時，vue內部會調用插件的install方法，此處給alert組件增加install方法，則最終打包完成后，按需引入alert功能組件時，可以使用vue.use(alert)進行注冊組件到全局。
其他功能模塊的目錄結構也大同小異，在入口處對組件進行install擴展。
4、src目錄中存放一些公共的mixin等工具和一個index.js入口文件，這個入口文件是打包后兼具所有功能組件的入口，上源碼，一個一個分析：
首先將packages中的各個功能模塊引入
定義一個install方法，在此方法中，將所有的功能模塊進行注冊。
components.map(component => { Vue.component(component.name, component); });遍歷注冊
Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
Vue.prototype.$ELEMENT = ELEMENT;對vue原型進行擴展，使vue實例中可直接使用this.$alert等便捷方法。
最后，將所有功能模塊和install方法一起導出。這樣當引入element-ui時，便可以使用vue.use(element-ui)進行注冊，即將所有的功能組件進行全局注冊。
5、lib目錄是按babel-plugin-component插件要求打包后存放最終代碼的目錄。
詳細看看這個目錄中的結構
目錄中，將各個功能模塊打包成了一個.js文件，在theme-chalk中，存放這名稱和功能模塊相同的.css文件。為何要這樣打包？？這就進入了我們的重點，看看babel-plugin-component插件的文檔：
import { Button } from 'antd' 會被解析成同時引入antd/lib/button/index.js和引入lib/button/style.css
這就是這個插件為我們帶來的按需引入的功能。插件會去解析你的代碼，當你引入的是配置的modules中的某一部分時，自動為你解析，只為你的項目引入你指定的部分。
這個插件有幾種目錄結構的配置方案，剛剛解釋的只是其中一種，我們來看element-ui采用的也是我們要使用的一種：
在lib下，存在幾個模塊componentA、componentB，當引入import {componentA} from '...'時，會被解析成從lib/componentA,此時，這個componentA若是目錄，則進入目錄找目錄入口，也就是index.js，若componentA是個.js文件，則直接引入這個文件。
樣式文件會通過你的bablerc配置，從lib中指定的目錄中去引入同名文件
看看bablerc中的相關配置：
在plugins中，增加component配置，component相關option配置：
看看element官網說明的配置：
配置了libraryName和styleLibraryName。
好，到此element的分析及babel-plugin-componentbable插件的說明暫時告一段落。
咱們繼續看我們如何去實現。
個人實現，按需引入
目錄結構：
項目是用vue-cli搭建的項目：
1、build中是webpack相關配置
2、example目錄是開發時調試用
3、src目錄中components中是各個功能模塊，各功能模塊的入口中同element一樣，對組件進行擴展，增加install方法，將組件進行全局注冊，index.js是入口，其中引入所有功能模塊，同時導出模塊和install方法，將所有模塊進行注冊。
4、lib中是最終打包的目標目錄
5、增加components.json文件
記錄將要打包的功能模塊名稱和路徑
webpack相關配置更改
規划中，需要將各個模塊打包至lib，一個功能模塊為一個.js文件，並且在theme目錄中存在一個同名的.css文件，這樣使用時借助babel-plugin-component插件就可實現按需引入。還需要一個總的index.js包含所有的功能模塊，和一個index.css包含所有的樣式。
這里采用多入口(entry)配置，實現各個功能模塊分別打包成一個.js文件，並使用extract-text-webpack-plugin將樣式進行抽離后，按入口chunk進行打包為對應的.css文件。
當將需要打包至一起是，使用單個入口，抽離所有css到一個css文件。
所以完成打包目標需要執行兩個打包命令，看package.json相關配置：
"scripts": { "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", "start": "npm run dev", "build": "node build/build.js", "build_all": "node build/build.js all" }npm run build進行將各個模塊打包為各自的.js文件，樣式文件也同時抽離處理為同名的.css，npm run build_all將所有的功能打包為index.js和index.css
上webpack詳細配置更改代碼：
首先在config中將assetsRoot，output的路徑設置為lib
在build.js中，獲取命令行參數，根據參數判斷需要進行的打包任務，下面詳細介紹webpack.prod.conf和webpack.prodAll.conf文件
webpack.prod.conf
1、刪除HtmlWebpackPlugin相關配置，這里只需打包為js文件和css文件，不涉及html
2、引入components.json，根據配置的模塊及路徑配置入口entrys，配置完后，將入口寫入entry配置
3、ExtractTextPlugin插件是進行css抽離的，這里不用處理
4、ouput中，出口.js文件的名稱不能寫死
5、在plugins插件配置處，ExtractTextPlugin相關配置，filename不能寫死，需要根據chunk名稱自動生成對應名稱。這里設置為'/theme/[name].css'指定目錄lib/theme存放
webpack.prodAll.conf
1、同樣刪除html相關配置
注意入口配置，設置為src/index.js這個文件中引入了所有的功能模塊。
output和抽離css的配置中的filename寫死成index也可，寫成[name]按chunk名也可，因為入口只有一個。只要在entry指定入口名為index。
到此，webpack配置就差不多完成了。最后上一個打包完成后的目錄結構：
這樣，在使用時，只需要引入babel-plugin-component插件，並進行配置，配置中，指定libraryName為庫名，指定styleLibraryName為theme即可。
這個相關配置已經發布了npm包。其中只有兩個功能組件，一個upload，一個input。
有讀者想要試按需引入功能的可以按如下配置：
1、bable配置：
2、引入時：
