摘要：簡單說明原理使用實現(xiàn)按需引入打包。這里采用多入口配置，實現(xiàn)各個功能模塊分別打包成一個文件，并使用將樣式進(jìn)行抽離后，按入口進(jìn)行打包為對應(yīng)的文件。只要在指定入口名為。這個相關(guān)配置已經(jīng)發(fā)布了包。

使用babel-plugin-component實現(xiàn)按需引入、打包。
將webpack配置成多入口，保證最終打包的目錄結(jié)構(gòu)符合babel-plugin-component插件的要求，實現(xiàn)按需加載

1、build目錄中是cooking配置文件，cooking是餓了么前端研發(fā)的基于webpack的前端構(gòu)建工具，我們使用原始的webpack實現(xiàn)。此處源碼忽略。

2、example中是element項目的例子存放，打開element網(wǎng)頁，可看見的項目入口。

3、packages目錄中，是所有的功能模塊，以alert模塊為例，分析目錄結(jié)構(gòu)

alert模塊目錄，有一個index.js作為模塊入口，在入口處，引入src目錄中的主要組件，再對該組件進(jìn)行拓展，增加install方法，我們知道，在對vue進(jìn)行擴(kuò)展，使用vue.use(...)時，vue內(nèi)部會調(diào)用插件的install方法，此處給alert組件增加install方法，則最終打包完成后，按需引入alert功能組件時，可以使用vue.use(alert)進(jìn)行注冊組件到全局。
其他功能模塊的目錄結(jié)構(gòu)也大同小異，在入口處對組件進(jìn)行install擴(kuò)展。

4、src目錄中存放一些公共的mixin等工具和一個index.js入口文件，這個入口文件是打包后兼具所有功能組件的入口，上源碼，一個一個分析：

首先將packages中的各個功能模塊引入

定義一個install方法，在此方法中，將所有的功能模塊進(jìn)行注冊。

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原型進(jìn)行擴(kuò)展，使vue實例中可直接使用this.$alert等便捷方法。

最后，將所有功能模塊和install方法一起導(dǎo)出。這樣當(dāng)引入element-ui時，便可以使用vue.use(element-ui)進(jìn)行注冊，即將所有的功能組件進(jìn)行全局注冊。

5、lib目錄是按babel-plugin-component插件要求打包后存放最終代碼的目錄。
詳細(xì)看看這個目錄中的結(jié)構(gòu)

目錄中，將各個功能模塊打包成了一個.js文件，在theme-chalk中，存放這名稱和功能模塊相同的.css文件。為何要這樣打包？？這就進(jìn)入了我們的重點(diǎn)，看看babel-plugin-component插件的文檔：

import { Button } from "antd" 會被解析成同時引入antd/lib/button/index.js和引入lib/button/style.css
這就是這個插件為我們帶來的按需引入的功能。插件會去解析你的代碼，當(dāng)你引入的是配置的modules中的某一部分時，自動為你解析，只為你的項目引入你指定的部分。
這個插件有幾種目錄結(jié)構(gòu)的配置方案，剛剛解釋的只是其中一種，我們來看element-ui采用的也是我們要使用的一種：

在lib下，存在幾個模塊componentA、componentB，當(dāng)引入import {componentA} from "..."時，會被解析成從lib/componentA,此時，這個componentA若是目錄，則進(jìn)入目錄找目錄入口，也就是index.js，若componentA是個.js文件，則直接引入這個文件。
樣式文件會通過你的bablerc配置，從lib中指定的目錄中去引入同名文件
看看bablerc中的相關(guān)配置：

在plugins中，增加component配置，component相關(guān)option配置：

看看element官網(wǎng)說明的配置：

配置了libraryName和styleLibraryName。

好，到此element的分析及babel-plugin-componentbable插件的說明暫時告一段落。
咱們繼續(xù)看我們?nèi)绾稳崿F(xiàn)。

目錄結(jié)構(gòu)：

項目是用vue-cli搭建的項目：
1、build中是webpack相關(guān)配置
2、example目錄是開發(fā)時調(diào)試用
3、src目錄中components中是各個功能模塊，各功能模塊的入口中同element一樣，對組件進(jìn)行擴(kuò)展，增加install方法，將組件進(jìn)行全局注冊，index.js是入口，其中引入所有功能模塊，同時導(dǎo)出模塊和install方法，將所有模塊進(jìn)行注冊。
4、lib中是最終打包的目標(biāo)目錄
5、增加components.json文件

記錄將要打包的功能模塊名稱和路徑

webpack相關(guān)配置更改

規(guī)劃中，需要將各個模塊打包至lib，一個功能模塊為一個.js文件，并且在theme目錄中存在一個同名的.css文件，這樣使用時借助babel-plugin-component插件就可實現(xiàn)按需引入。還需要一個總的index.js包含所有的功能模塊，和一個index.css包含所有的樣式。
這里采用多入口(entry)配置，實現(xiàn)各個功能模塊分別打包成一個.js文件，并使用extract-text-webpack-plugin將樣式進(jìn)行抽離后，按入口chunk進(jìn)行打包為對應(yīng)的.css文件。
當(dāng)將需要打包至一起是，使用單個入口，抽離所有css到一個css文件。
所以完成打包目標(biāo)需要執(zhí)行兩個打包命令，看package.json相關(guān)配置：

"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進(jìn)行將各個模塊打包為各自的.js文件，樣式文件也同時抽離處理為同名的.css，npm run build_all將所有的功能打包為index.js和index.css

上webpack詳細(xì)配置更改代碼：

首先在config中將assetsRoot，output的路徑設(shè)置為lib

在build.js中，獲取命令行參數(shù)，根據(jù)參數(shù)判斷需要進(jìn)行的打包任務(wù)，下面詳細(xì)介紹webpack.prod.conf和webpack.prodAll.conf文件

webpack.prod.conf

1、刪除HtmlWebpackPlugin相關(guān)配置，這里只需打包為js文件和css文件，不涉及html
2、引入components.json，根據(jù)配置的模塊及路徑配置入口entrys，配置完后，將入口寫入entry配置
3、ExtractTextPlugin插件是進(jìn)行css抽離的，這里不用處理
4、ouput中，出口.js文件的名稱不能寫死

5、在plugins插件配置處，ExtractTextPlugin相關(guān)配置，filename不能寫死，需要根據(jù)chunk名稱自動生成對應(yīng)名稱。這里設(shè)置為"/theme/[name].css"指定目錄lib/theme存放

webpack.prodAll.conf

1、同樣刪除html相關(guān)配置

注意入口配置，設(shè)置為src/index.js這個文件中引入了所有的功能模塊。
output和抽離css的配置中的filename寫死成index也可，寫成[name]按chunk名也可，因為入口只有一個。只要在entry指定入口名為index。

到此，webpack配置就差不多完成了。最后上一個打包完成后的目錄結(jié)構(gòu)：

這樣，在使用時，只需要引入babel-plugin-component插件，并進(jìn)行配置，配置中，指定libraryName為庫名，指定styleLibraryName為theme即可。

這個相關(guān)配置已經(jīng)發(fā)布了npm包。其中只有兩個功能組件，一個upload，一個input。
有讀者想要試按需引入功能的可以按如下配置：
1、bable配置：

2、引入時：

本文完成啦，希望能對你有所幫助～～學(xué)無止境，大家共勉

1、相關(guān)代碼已經(jīng)發(fā)布至github，地址：https://github.com/yuanalina/installAsRequired
2、打包時需要注意名稱命名需要使用kebab-case (短橫線分隔命名)格式，例如：button-model,在components.json配置中，需要使用短橫線分隔命名；
3、在后續(xù)的配置中我進(jìn)行了優(yōu)化，把整體打包和各組件分離打包整合到了一起，更改的地方為：在components.json中增加"index": "./src/index.js"即可。詳見github