vue+webpack4多頁面打包配置

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...