vue+webpack4多頁面打包配置

tigerZH 發布于2019-08-23 15:38 / 1992人閱讀

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

vue+webpack4多頁面打包配置

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

1. 整體目錄結構

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

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

2. webpack配置 2.1 文件結構

創建base、dev、prod三個文件。我們在base文件中配置entry、output、loader、公共的plugin等，其余的根據開發環境和線上環境各自所需在各自不同的文件中增刪改。

2.2 entry

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

/**
 * 通過約定，降低編碼復雜度
 * 每新增一個入口，即在src/pages目錄下新增一個文件夾，以頁面名稱命名，內置一個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的配置選項如下，打完包后的目錄結構如圖所示：

//判斷是否是開發環境
const devMode = process.env.NODE_ENV === "development"; 

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

2.4 html-webpack-plugin

配置完了entry和output，接下來需要為每個頁面生成一個多帶帶的html文件，也就是為每個頁面創建一個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等生產環境打包的優化配置。在文末的github地址中可以看到全部的配置信息。

3. 多頁面+SPA

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

附

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

云服務器 GPU云服務器 vue.js多頁面多文件打包阿里云服務器上傳用vue做好的頁面 webpack4

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102348.html

webpack4+vue2+axios+vue-router的多頁+單頁混合應用框架

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

whatsns 2019-08-23 11:44 評論0 收藏0
基于webpack4的VUE多頁腳手架

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

張金寶 2019-08-23 18:40 評論0 收藏0
webpack4 多頁面配置功能齊全開箱即用

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

antz 2019-08-23 10:25 評論0 收藏0
基于webpack4.x, babel7.x 搭建的多頁面腳手架, 簡化前端開發環境配置，開箱即用，

摘要：開箱即用的多頁面腳手架基于模塊化開發可復用的現代化網站感興趣的朋友，請點個及時關注項目更新請點個項目請提特性支持前后端分離開發配置完整的打包方案支持本地開發熱更新集成代碼風格校驗支持編寫源碼，編譯生成生產代碼內置開發環境，自動加樣式前綴自 Webpack-seed 開箱即用的多頁面腳手架, 基于webpack4.2x babel7.1x模塊化開發可復用的現代化網站(Without Vu...

junfeng777 2019-08-23 12:29 評論0 收藏0