亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

vue+webpack4多頁(yè)面打包配置

tigerZH / 2046人閱讀

摘要：整體目錄結(jié)構(gòu)為了便于打包，我們創(chuàng)建一個(gè)的文件夾，在其下創(chuàng)建一個(gè)個(gè)的子文件夾代表一個(gè)個(gè)頁(yè)面，每個(gè)子文件夾中建立各自的應(yīng)用體系，如圖所示這樣做的好處是，我們?cè)谂渲玫拇虬肟跁r(shí)，比較好操作，而且這樣的結(jié)構(gòu)也較為清晰。

vue+webpack4多頁(yè)面打包配置

多頁(yè)面配置通常有兩種形式，一種是多頁(yè)面多配置，一種是多頁(yè)面單配置。因?yàn)閣ebpack（3.1以上）可以直接處理一個(gè)配置對(duì)象的數(shù)組，所以可以為每個(gè)頁(yè)面多帶帶寫一份配置。
?
通常來(lái)講，多配置的優(yōu)點(diǎn)是配置靈活、獨(dú)立，可以并行打包，從而提高打包速度，缺點(diǎn)是不能在多頁(yè)面之間共享代碼（一個(gè)頁(yè)面加載了之后，下一個(gè)頁(yè)面還得再加載一遍）；單配置的特點(diǎn)基本上是和多配置相對(duì)。具體使用哪一種形式，看具體業(yè)務(wù)情況。本文主要介紹的是單配置的形式。
?

1. 整體目錄結(jié)構(gòu)

為了便于打包，我們創(chuàng)建一個(gè)pages的文件夾，在其下創(chuàng)建一個(gè)個(gè)的子文件夾代表一個(gè)個(gè)頁(yè)面，每個(gè)子文件夾中建立各自的spa應(yīng)用體系，如圖所示：

這樣做的好處是，我們?cè)谂渲脀ebpack的打包入口時(shí)，比較好操作，而且這樣的結(jié)構(gòu)也較為清晰。
?

2. webpack配置 2.1 文件結(jié)構(gòu)

創(chuàng)建base、dev、prod三個(gè)文件。我們?cè)赽ase文件中配置entry、output、loader、公共的plugin等，其余的根據(jù)開發(fā)環(huán)境和線上環(huán)境各自所需在各自不同的文件中增刪改。

2.2 entry

根據(jù)整體目錄結(jié)構(gòu)，每個(gè)頁(yè)面文件夾都有各自的入口js文件，我們?cè)谂渲胑ntry選項(xiàng)時(shí)，就可以按如下編碼方式書寫：

/**
 * 通過(guò)約定，降低編碼復(fù)雜度
 * 每新增一個(gè)入口，即在src/pages目錄下新增一個(gè)文件夾，以頁(yè)面名稱命名，內(nèi)置一個(gè)index.js作為入口文件
 * 通過(guò)node的文件api掃描pages目錄
 * 這樣可以得到一個(gè)形如{page1: "入口文件地址", page2: "入口文件地址", ...}的對(duì)象
 */
const getEntries = () => {
    let result = fs.readdirSync(pagesDirPath);
    let entry = {};
    result.forEach(item => {
        entry[item] = path.resolve(__dirname, `../src/pages/${item}/index.js`);
    });
    return entry;
}

module.exports = {
    entry: getEntries()
    
    ...
}
2.3 output

output的配置選項(xiàng)如下，打完包后的目錄結(jié)構(gòu)如圖所示：

//判斷是否是開發(fā)環(huán)境
const devMode = process.env.NODE_ENV === "development"; 

module.exports = {
    ...
    
    output: {
        publicPath: devMode ? "" : "/",
        //這里的name即為我們entry對(duì)象中的每一個(gè)key值，也就是我們?cè)趐ages目錄下創(chuàng)建的一個(gè)個(gè)文件夾的名稱
        filename: devMode ? "[name].js" : "static/js/[name].[chunkhash].js",
        path: path.resolve(__dirname, "../dist")
    }
    
    ...
}

2.4 html-webpack-plugin

配置完了entry和output，接下來(lái)需要為每個(gè)頁(yè)面生成一個(gè)多帶帶的html文件，也就是為每個(gè)頁(yè)面創(chuàng)建一個(gè)html-webpack-plugin的實(shí)例：

/**
 * 掃描pages文件夾，為每個(gè)頁(yè)面生成一個(gè)插件實(shí)例對(duì)象
 */
const generatorHtmlWebpackPlugins = () => {
    let arr = [];
    let result = fs.readdirSync(pagesDirPath);
    result.forEach(item => {
        //判斷頁(yè)面目錄下有無(wú)自己的index.html
        let templatePath;
        let selfTemplatePath = pagesDirPath + `/${item}/index.html`;
        let publicTemplatePath = path.resolve(__dirname, "../src/public/index.html");
        try {
            fs.accessSync(selfTemplatePath);
            templatePath = selfTemplatePath;
        } catch(err) {
            templatePath = publicTemplatePath;
        }
        arr.push(new HtmlWebpackPlugin({
            template: templatePath,
            filename: `${item}.html`,
            chunks: ["manifest", "vendor", item]
        }));
    });
    return arr;
}

module.exports = {
    ...
    
    plugins: [
        ...generatorHtmlWebpackPlugins()
    ]
    
    ...
}

這里為了靈活性考慮，判斷了各自的頁(yè)面子文件夾中有無(wú)html模板文件；如果不需要，可以把templat路徑直接定義成公共html文件的地址。

2.5 其他配置

基本上前面的幾點(diǎn)配置就是一個(gè)多頁(yè)面打包配置的雛形。此外還可以配置下諸如optimization、mini-css-extract-plugin等生產(chǎn)環(huán)境打包的優(yōu)化配置。在文末的github地址中可以看到全部的配置信息。

3. 多頁(yè)面+SPA

雖然我們這是一個(gè)多頁(yè)面的應(yīng)用，但每個(gè)頁(yè)面也可以做成一個(gè)spa，如果你有這種需求的話；此外可以配置@babel/plugin-syntax-dynamic-import插件以支持import()，在router層面做代碼分割和懶加載。

附

原文代碼地址：https://github.com/gww666/2-m...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/102348.html

相關(guān)文章

  • webpack4+vue2+axios+vue-router的多頁(yè)+單頁(yè)混合應(yīng)用框架

    摘要：適用于主要入口頁(yè)面生成多頁(yè)，子頁(yè)面和次要頁(yè)面使用單頁(yè)形式的項(xiàng)目。文件用來(lái)存放固定的數(shù)據(jù)，而文件可更加自由的處理并返回?cái)?shù)據(jù)。 VUE2的單頁(yè)應(yīng)用框架有人分享了，多頁(yè)應(yīng)用框架也有人分享了，這里分享一個(gè)單頁(yè)+多頁(yè)的混合應(yīng)用框架吧，node.js寫了一個(gè)簡(jiǎn)單的mock服務(wù)也集成在里面，整體初現(xiàn)雛形，還有很多需要優(yōu)化和改善的地方。。。 項(xiàng)目結(jié)構(gòu) │ ├─build ...

    whatsns 評(píng)論0 收藏0

  • 基于webpack4的VUE多頁(yè)腳手架

    摘要：另外備注一部分參數(shù)的說(shuō)明折疊有助于文檔樹中文本節(jié)點(diǎn)的空白區(qū)域?qū)M(jìn)行壓縮默認(rèn)默認(rèn)按照不同文件的依賴關(guān)系來(lái)排序。敲黑板講重點(diǎn)的當(dāng)然目前這部分的文檔在官網(wǎng)還不是很全，所以這里我們參考了印記中文的說(shuō)明文檔，指優(yōu)化模塊。 鏈接 寫在前面 為什么要自己手寫一個(gè)腳手架？ 如何去思考遇到的問(wèn)題？ 正文 鏈接 原文鏈接 github whale-vue ——寫在前面 1、為什么要自己手寫...

    張金寶 評(píng)論0 收藏0

  • webpack4 多頁(yè)面配置 功能齊全 開箱即用

    摘要：地址快速使用克隆項(xiàng)目刪除文件夾，這是我的記錄，所以刪除安裝依賴進(jìn)入開發(fā)模式打包一鍵兼容圖片在執(zhí)行完后執(zhí)行默認(rèn)情況下中的會(huì)被處理成當(dāng)?shù)臑殚_頭則會(huì)被忽略該處理當(dāng)?shù)闹邪_頭則會(huì)被忽略該處理圖片壓縮原圖文件夾壓縮后圖片文件夾雪碧圖原 webpack-multi-page github地址 1、快速使用 1.1 克隆項(xiàng)目 git clone https://github.com/lfyfly/...

    antz 評(píng)論0 收藏0

  • 基于webpack4.x, babel7.x 搭建的多頁(yè)面腳手架, 簡(jiǎn)化前端開發(fā)環(huán)境配置，開箱即用，

    摘要：開箱即用的多頁(yè)面腳手架基于模塊化開發(fā)可復(fù)用的現(xiàn)代化網(wǎng)站感興趣的朋友，請(qǐng)點(diǎn)個(gè)及時(shí)關(guān)注項(xiàng)目更新請(qǐng)點(diǎn)個(gè)項(xiàng)目請(qǐng)?zhí)崽匦灾С智昂蠖朔蛛x開發(fā)配置完整的打包方案支持本地開發(fā)熱更新集成代碼風(fēng)格校驗(yàn)支持編寫源碼，編譯生成生產(chǎn)代碼內(nèi)置開發(fā)環(huán)境，自動(dòng)加樣式前綴自 Webpack-seed 開箱即用的多頁(yè)面腳手架, 基于webpack4.2x babel7.1x模塊化開發(fā)可復(fù)用的現(xiàn)代化網(wǎng)站(Without Vu...

    junfeng777 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<