成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue+webpack4多頁面打包配置

tigerZH / 2002人閱讀

摘要：整體目錄結(jié)構(gòu)為了便于打包，我們創(chuàng)建一個的文件夾，在其下創(chuàng)建一個個的子文件夾代表一個個頁面，每個子文件夾中建立各自的應(yīng)用體系，如圖所示這樣做的好處是，我們在配置的打包入口時，比較好操作，而且這樣的結(jié)構(gòu)也較為清晰。

vue+webpack4多頁面打包配置

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

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

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

這樣做的好處是，我們在配置webpack的打包入口時，比較好操作，而且這樣的結(jié)構(gòu)也較為清晰。
?

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

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

2.2 entry

根據(jù)整體目錄結(jié)構(gòu)，每個頁面文件夾都有各自的入口js文件，我們在配置entry選項時，就可以按如下編碼方式書寫：

/**
 * 通過約定，降低編碼復(fù)雜度
 * 每新增一個入口，即在src/pages目錄下新增一個文件夾，以頁面名稱命名，內(nèi)置一個index.js作為入口文件
 * 通過node的文件api掃描pages目錄
 * 這樣可以得到一個形如{page1: "入口文件地址", page2: "入口文件地址", ...}的對象
 */
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的配置選項如下，打完包后的目錄結(jié)構(gòu)如圖所示：

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

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

2.4 html-webpack-plugin

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

/**
 * 掃描pages文件夾，為每個頁面生成一個插件實例對象
 */
const generatorHtmlWebpackPlugins = () => {
    let arr = [];
    let result = fs.readdirSync(pagesDirPath);
    result.forEach(item => {
        //判斷頁面目錄下有無自己的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()
    ]
    
    ...
}

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

2.5 其他配置

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

3. 多頁面+SPA

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

附

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102348.html

相關(guān)文章

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

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

    whatsns 評論0 收藏0

  • 基于webpack4的VUE多頁腳手架

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

    張金寶 評論0 收藏0

  • webpack4 多頁面配置 功能齊全 開箱即用

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

    antz 評論0 收藏0

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

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

    junfeng777 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<