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

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

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

2、example中是element項(xiàng)目的例子存放，打開(kāi)element網(wǎng)頁(yè)，可看見(jiàn)的項(xiàng)目入口。

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

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

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

首先將packages中的各個(gè)功能模塊引入

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

components.map(component => {
    Vue.component(component.name, component);
});

遍歷注冊(cè)

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;

對(duì)vue原型進(jìn)行擴(kuò)展，使vue實(shí)例中可直接使用this.$alert等便捷方法。

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

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

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

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

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

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

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

配置了libraryName和styleLibraryName。

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

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

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

記錄將要打包的功能模塊名稱(chēng)和路徑

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

規(guī)劃中，需要將各個(gè)模塊打包至lib，一個(gè)功能模塊為一個(gè).js文件，并且在theme目錄中存在一個(gè)同名的.css文件，這樣使用時(shí)借助babel-plugin-component插件就可實(shí)現(xiàn)按需引入。還需要一個(gè)總的index.js包含所有的功能模塊，和一個(gè)index.css包含所有的樣式。
這里采用多入口(entry)配置，實(shí)現(xiàn)各個(gè)功能模塊分別打包成一個(gè).js文件，并使用extract-text-webpack-plugin將樣式進(jìn)行抽離后，按入口chunk進(jìn)行打包為對(duì)應(yīng)的.css文件。
當(dāng)將需要打包至一起是，使用單個(gè)入口，抽離所有css到一個(gè)css文件。
所以完成打包目標(biāo)需要執(zhí)行兩個(gè)打包命令，看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)行將各個(gè)模塊打包為各自的.js文件，樣式文件也同時(shí)抽離處理為同名的.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，配置完后，將入口寫(xiě)入entry配置
3、ExtractTextPlugin插件是進(jìn)行css抽離的，這里不用處理
4、ouput中，出口.js文件的名稱(chēng)不能寫(xiě)死

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

webpack.prodAll.conf

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

注意入口配置，設(shè)置為src/index.js這個(gè)文件中引入了所有的功能模塊。
output和抽離css的配置中的filename寫(xiě)死成index也可，寫(xiě)成[name]按chunk名也可，因?yàn)槿肟谥挥幸粋€(gè)。只要在entry指定入口名為index。

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

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

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

2、引入時(shí)：

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

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