欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue+ElementUI項(xiàng)目使用webpack輸出MPA的方法

 更新時(shí)間：2019年08月27日 08:40:05   作者：大史不說話  
這篇文章主要介紹了Vue+ElementUI項(xiàng)目使用webpack輸出MPA的方法，本文圖文并茂給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一. 需求分析

為另一個(gè)項(xiàng)目提供可嵌入的功能單頁，大部分頁面使用時(shí)都是獨(dú)立功能頁，個(gè)別頁面帶有左側(cè)邊欄（相當(dāng)于3-4個(gè)頁面的整合形態(tài)），由于資源定位地址的限定，每個(gè)頁面打包為單頁后，入口html文件需要定制命名，且腳本和樣式文件需要放在指定的路徑下，公共資源地址也必須替換成特殊字符以適配母系統(tǒng)的調(diào)用邏輯（比如下面結(jié)構(gòu)中應(yīng)用jquery.min.js的路徑可能是{{publicRoot}}/{{publicLib}}/jquery.minjs）。假設(shè)原工程中擁有AB這2個(gè)舊頁面，現(xiàn)在需要開發(fā)CDE這3個(gè)頁面，目錄結(jié)構(gòu)要求如下：

藍(lán)色部分為舊資源，綠色部分為新開發(fā)需求。

二. 原方案分析

原方案采用Vue+ElementUI進(jìn)行開發(fā)，構(gòu)建過程基本是零配置的，開發(fā)效率非常高，頁面風(fēng)格也統(tǒng)一，但零配置的構(gòu)建過程只能生成SPA模式的應(yīng)用，所以原方案的做法是：

將構(gòu)建過程中需要定制的量提取到config.js文件中進(jìn)行統(tǒng)一管理，大致形式如下：

//config.js
module.exports = {
  A:{
    publicPath:'{{publicRoot}}/{{publicLib}}'
    prodFileName:'A.html',
    entryKey:'public/A',
    entryPath:'public/A/A.js'
  },
  B:{
    //...
  }
  //...
}

開發(fā)過程中使用統(tǒng)一的路由文件router.js，打包過程中在main.js中引用對(duì)應(yīng)頁面的XX.router.spa.js作為路由，而將其他頁面注釋掉，打包時(shí)傳入命令行參數(shù)--key=XXX,key值在打包腳本中被解析后從config.js中取出打包需要的設(shè)置參數(shù)，然后將目標(biāo)頁面打包為獨(dú)立頁面，其他頁面雖然也在工程中，但并不參與打包。

// 入口文件src/main.js
import router from './pages/C/router.spa';
//import router from './pages/D/router.spa';
//import router from './pages/E/router.spa';

上述打包過程在使用中出現(xiàn)了很多問題：

  • 公共依賴沒有剝離，vue和ElementUI會(huì)被打包進(jìn)每一個(gè)單頁面，使得每個(gè)打包出的index.js幾乎有1.2MB大小，這種空間浪費(fèi)是沒必要的。
  • 公共樣式?jīng)]有形成獨(dú)立文件，這使得每當(dāng)有樣式細(xì)節(jié)發(fā)生變更，就需要手動(dòng)將每個(gè)頁面逐一進(jìn)行重新出包。
  • 頁面增多后在main.js中會(huì)有很多獨(dú)立路由，如果開發(fā)中進(jìn)行了跨頁面修改，很可能在main.js中激活的路由為C頁面路由時(shí)，打包時(shí)--key參數(shù)的值卻傳成了D，這種情況并不會(huì)引起報(bào)錯(cuò)，但事實(shí)上構(gòu)建結(jié)果確實(shí)錯(cuò)誤的。
  • 由于入口文件保持main.js沒有變化，所以在不同頁面打包時(shí)，結(jié)果都輸出在dist目錄下，需要手動(dòng)與母工程中的地址去匹配，操作繁瑣。

三. 多頁面改造3步走

上面的問題實(shí)際上都是因?yàn)樵桨笇⒁粋€(gè)多頁面開發(fā)需求按照單頁面應(yīng)用來實(shí)現(xiàn)而造成的，需要對(duì)自動(dòng)化構(gòu)建工程進(jìn)行一些定制。

1.分離webpack配置

本例中開發(fā)環(huán)境和最終打包的主要差異在于路由上，開發(fā)中由于可能需要進(jìn)行跨頁面開發(fā)，可以使用單入口和獨(dú)立路由，而進(jìn)行生產(chǎn)環(huán)境構(gòu)建時(shí)則需要輸出多頁面應(yīng)用，所以首先要做的就是將原本的webpack.config.js文件拆分為webpack.base.js,webpack.dev.js,webpack.prod.js三個(gè)文件，webpack.base.js為環(huán)境無差別的配置，然后依據(jù)構(gòu)建模式的不同，使用webpack-merge插件將環(huán)境相關(guān)的配置與基本配置進(jìn)行合并：

/*webpack.base.js示例*/
const argv = require('yargs-parser')(process.argv.slice(2));
const env_short = argv.env.all ? 'all' : argv.p ? 'prod':'dev';
const webpackConfig = require(`./config/webpack.${env_short}`);//根據(jù)-p屬性加載webpack的dev配置或prod配置
const merge = require('webpack-merge');

//基本配置
const baseConfig = {
  //....
}

//輸出合并后的配置
module.exports = merge(baseConfig, webpackConfig);

webpack.dev.js保持原本的SPA開發(fā)的設(shè)置即可滿足需求。

2. 抽離外部引用

本例中較大的外部應(yīng)用是vue和ElementUI，很多開發(fā)者一直使用自動(dòng)化腳手架工具，并沒有意識(shí)到這兩個(gè)庫作為外部依賴該如何引入工程。公共庫的抽離需要在webpack配置中將其填寫在external配置項(xiàng)中:

module.exports = {
 //...
 externals:{
   vue:'Vue',
   'element-ui':'ELEMENT'
 },
 //...
}

key為引用的模塊名,value為這個(gè)模塊引入后對(duì)應(yīng)的全局命名，external配置項(xiàng)的含義是：請(qǐng)不要將這個(gè)模塊注入編譯后的JS文件里，對(duì)于源代碼里出現(xiàn)的任何import/require這個(gè)模塊的語句，請(qǐng)將它保留并根據(jù)模塊化標(biāo)準(zhǔn)進(jìn)行依賴方式適配 。

Tips:

Vue做為外部依賴時(shí)有很多構(gòu)建包，本例中因?yàn)槭褂脀ebpack進(jìn)行了構(gòu)建，沒有在線編譯模板的需求，所以不需要引入完整的Vue,而只需要引入壓縮后的只包含運(yùn)行時(shí)的版本vue.runtime.min.js即可。外部引入庫時(shí)需要注意命名，比如上例中的ELEMENT，開發(fā)者通常會(huì)填寫為自己在代碼中使用的ElementUI而引起報(bào)錯(cuò)，當(dāng)不確定名稱時(shí)，有個(gè)簡單的辦法就是找一個(gè)CDN的資源看一下，通常代碼最開始都是UMD規(guī)范的固定結(jié)構(gòu)，很容易看到關(guān)鍵詞(如下圖所示)。

然后將資源的CDN地址或是本地公共庫地址加入到index.html中，你可以使用模板語法，然后從html-webpack-plugin插件實(shí)例化時(shí)傳入定制參數(shù):

<!--html文件模板-->
<body>
 <div id="app"></div>
 <script src="<%= htmlWebpackPlugin.options.vue_path %>"></script>
 <script src="<%= htmlWebpackPlugin.options.elementUI_path %>"></script>
 <script src="<%= htmlWebpackPlugin.options.tpl_entryPath %>/index.js"></script>
</body>
//webpack.prod.js
module.exports = {
  //...
 plugins: [
  new HtmlWebpackPlugin({
   template: 'src/index.html',//生成index.html時(shí)依據(jù)的模板
   filename: '.....',
   inject:false,
   tpl_entryPath:'....',
   vue_path:'.....',
   elementUI_path:'.....',
  }),
  //new BundleAnalyzerPlugin()
 ],
}

最終打包后生成的index.html文件大致如下：

<body>
 <div id="app"></div>
 <script src="{{publicRoot}}/{{publicLib}}/vue.min.js"></script>
 <script src="{{publicRoot}}/{{publicLib}}/element-ui.js"></script>
 <script src="public/A/A.js"></script>
</body>

如果第三方庫從本地加載，則需要將/node_modules/element-ui/lib/index.js和/node_modules/vue/dist/vue.runtime.min.js兩個(gè)依賴文件拷貝到lib文件夾中的對(duì)應(yīng)地址，這樣訪問index.html時(shí)就可以以外部依賴的形式將其加載進(jìn)來。樣式文件的剝離直接使用插件完成即可，webpack4以前的版本使用extract-text-webpack-plugin,從4.0版本后統(tǒng)一使用mini-css-extract-plugin。

3. 為webpack定制多入口

多入口的配置是多頁面應(yīng)用打包的關(guān)鍵，由于打包結(jié)果存在嵌套目錄，所以需要對(duì)entry對(duì)象的鍵值進(jìn)行一些定制，打包后的路徑信息是直接通過key值來定制的，同時(shí)需要實(shí)例化多個(gè)HtmlWebpackPlugin來為每一個(gè)入口文件生成一個(gè)對(duì)應(yīng)的index.html訪問入口，定制參數(shù)可以在實(shí)例化時(shí)傳入：

//webpack.prod.js
module.exports = {
  entry:{
    'C/index':'./src/pages/C/C.entry.js',
    'DESK/D/index':'./src/pages/D/D.entry.js',
    'DESK/E/index':'./src/pages/E/E.entry.js'
  }
  //...
  plugins:[
    new HtmlWebpackPlugin({...paramsC}),
    new HtmlWebpackPlugin({...paramsD}),
    new HtmlWebpackPlugin({...paramsE}),
  ]
}

當(dāng)然你可以將entry或plugins數(shù)組的組裝過程剝離到其他文件中，然后直接引用：

當(dāng)然，每個(gè)頁面的入口文件X.entry.js相當(dāng)于舊方案中main.js文件中移除被注釋掉的未啟用路由信息后剩余的部分，它足以支撐每個(gè)單頁獨(dú)立被訪問。

四. 小結(jié)

經(jīng)上述改造后，在dist目錄中輸出的結(jié)構(gòu)和需求中public目錄下的結(jié)構(gòu)就保持一致了，而且每個(gè)頁面的index.js文件也縮小到了100K左右。當(dāng)然你也可以使用node.js去編寫一些自動(dòng)化腳本，將后續(xù)的替換過程也自動(dòng)化，或者繼續(xù)對(duì)webpack的打包過程進(jìn)行優(yōu)化，本文就不再贅述了。

以上所述是小編給大家介紹的Vue+ElementUI項(xiàng)目使用webpack輸出MPA的方法,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

相關(guān)文章

最新評(píng)論