├── node_modules               # 項(xiàng)目依賴(lài)包目錄
├── build                      # 項(xiàng)目 webpack 功能目錄
├── config                     # 項(xiàng)目配置項(xiàng)文件夾
├── src                        # 前端資源目錄
│   ├── images                 # 圖片目錄
│   ├── components             # 公共組件目錄
│   ├── pages                  # 頁(yè)面目錄
│   │   ├── page1              # page1 目錄
│   │   │   ├── components     # page1 組件目錄
│   │   │   ├── router         # page1 路由目錄
│   │   │   ├── views          # page1 頁(yè)面目錄
│   │   │   ├── page1.html     # page1 html 模板
│   │   │   ├── page1.vue      # page1 vue 配置文件
│   │   │   └── page1.js       # page1 入口文件
│   │   ├── page2              # page2 目錄
│   │   └── index              # index 目錄
│   ├── common                 # 公共方法目錄
│   └── store                  # 狀態(tài)管理 store 目錄
├── .gitignore                 # git 忽略文件
├── .env                       # 全局環(huán)境配置文件
├── .env.dev                   # 開(kāi)發(fā)環(huán)境配置文件
├── .postcssrc.js              # postcss 配置文件
├── babel.config.js            # babel 配置文件
├── package.json               # 包管理文件
├── vue.config.js              # CLI 配置文件
└── yarn.lock                  # yarn 依賴(lài)信息文件

module.exports = {
    ...
    
    entry: {
        page1: '/xxx/pages/page1/page1.js',
        page2: '/xxx/pages/page2/page2.js',
        index: '/xxx/pages/index/index.js',
    },
    
    ...
}

/* utils.js */
const path = require('path');
 
// glob 是 webpack 安裝時(shí)依賴(lài)的一個(gè)第三方模塊，該模塊允許你使用 * 等符號(hào),
// 例如 lib/*.js 就是獲取 lib 文件夾下的所有 js 后綴名的文件
const glob = require('glob');
 
// 取得相應(yīng)的頁(yè)面路徑，因?yàn)橹暗呐渲茫允?src 文件夾下的 pages 文件夾
// PAGE_PATH 變量定義了存放頁(yè)面文件的路徑
const PAGE_PATH = path.resolve(__dirname, '../src/pages');
 
/* 
* 多入口配置
* 通過(guò) glob 模塊讀取 pages 文件夾下的所有對(duì)應(yīng)文件夾下的 js * 后綴文件，如果該文件存在
* 那么就作為入口處理
*/
exports.getEntries = () => {
    //glob.sync 方法同步讀取 PAGE_PATH 下的所有子目錄中的 .js 文件，將匹配到的文件路徑存儲(chǔ)在 entryFiles 數(shù)組中
    let entryFiles = glob.sync(PAGE_PATH + '/*/*.js') 
    let map = {}
    
    // 遍歷所有入口文件,和構(gòu)建入口對(duì)象
    entryFiles.forEach(filePath => {
        // 獲取文件名
        let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
        
        // 通過(guò) forEach 遍歷每個(gè)文件路徑，提取文件名，并將文件名（不帶擴(kuò)展名）作為鍵，將文件路徑作為值，構(gòu)建成一個(gè)對(duì)象 map
        map[filename] = filePath 
    })
    
    return map
}

 {

        'page1': '/path/to/src/pages/page1/index.js',

         'page2': '/path/to/src/pages/page2/index.js',

        ...

}

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { getEntries } = require('./utils');
 
module.exports = {
    entry: getEntries(), // 使用 getEntries 方法獲取入口
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[contenthash].js', // 依據(jù)入口名稱(chēng)生成文件
    },
    plugins: Object.keys(getEntries()).map(entry => {
        return new HtmlWebpackPlugin({
            template: path.resolve(__dirname, `../src/pages/${entry}/index.html`), // 根據(jù)頁(yè)面生成 HTML
            filename: `${entry}.html`,
            chunks: [entry], // 只引入當(dāng)前入口的 chunk
        });
    }),
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },
    optimization: {
        splitChunks: {
            chunks: 'all',
        },
    }
};

yarn add glob --dev

/* webpack 配置文件 */
const HtmlWebpackPlugin = require('html-webpack-plugin') // 安裝并引用插件
 
module.exports = {
    ...
    
    plugins: [
        new HtmlWebpackPlugin({
            title: 'My Page', // 生成 html 中的 title
            filename: 'demo.html', // 生成 html 的文件名
            template: 'xxx/xxx/demo.html', // 模板路徑
            chunks: ['manifest', 'vendor', 'demo'], // 所要包含的模塊
            inject: true, // 是否注入資源
        })
    ]
    
    ...
}

/* utils.js */
 
// 多頁(yè)面輸出配置
// 與上面的多頁(yè)面入口配置相同，讀取 page 文件夾下的對(duì)應(yīng)的 html 后綴文件，然后放入數(shù)組中
exports.htmlPlugin = configs => {
    let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
    let arr = []
    
    entryHtml.forEach(filePath => {
        let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
        let conf = {
            template: filePath, // 模板路徑
            filename: filename + '.html', // 生成 html 的文件名
            chunks: ['manifest', 'vendor',  filename],
            inject: true,
        }
        
        // 如果有自定義配置可以進(jìn)行 merge
        if (configs) {
            conf = merge(conf, configs)
        }
        
        // 針對(duì)生產(chǎn)環(huán)境配置
        if (process.env.NODE_ENV === 'production') {
            conf = merge(conf, {
                minify: {
                    removeComments: true, // 刪除 html 中的注釋代碼
                    collapseWhitespace: true, // 刪除 html 中的空白符
                    // removeAttributeQuotes: true // 刪除 html 元素中屬性的引號(hào)
                },
                chunksSortMode: 'manual' // 按 manual 的順序引入
            })
        }
        
        arr.push(new HtmlWebpackPlugin(conf))
    })
    
    return arr
}

exports.htmlPlugin = configs => {
    let entryHtml = glob.sync(PAGE_PATH + '/*/*.html');
    let arr = [];

entryHtml.forEach(filePath => {
    let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))

    let conf = {
        template: filePath, // 模板路徑
        filename: filename + '.html', // 生成 HTML 的文件名
        chunks: ['manifest', 'vendor', filename],
        inject: true,
    };

    if (configs) {
        conf = merge(conf, configs);
    }

 if (process.env.NODE_ENV === 'production') {
        conf = merge(conf, {
            minify: {
                removeComments: true, // 刪除 HTML 中的注釋代碼
                collapseWhitespace: true, // 刪除 HTML 中的空白符
            },
            chunksSortMode: 'manual' // 按 manual 的順序引入
        });
    }

arr.push(new HtmlWebpackPlugin(conf));

/* vue.config.js */
 
const utils = require('./build/utils')
 
module.exports = {
    ...
    
    configureWebpack: config => {
        config.entry = utils.getEntries() // 直接覆蓋 entry 配置
        
        // 使用 return 一個(gè)對(duì)象會(huì)通過(guò) webpack-merge 進(jìn)行合并，plugins 不會(huì)置空
        return {
            plugins: [...utils.htmlPlugin()]
        }
    },
    
    ...
}

/* vue.config.js */
module.exports = {
pages: {
    index: {
        entry: 'src/index/main.js',
        template: 'public/index.html',
        filename: 'index.html',
        title: 'Index Page',
        chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    subpage: 'src/subpage/main.js'
}
}

// pages 多入口配置
exports.setPages = configs => {
    let entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
    let map = {}
 
    entryFiles.forEach(filePath => {
        let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
        let tmp = filePath.substring(0, filePath.lastIndexOf('\/'))
 
        let conf = {
            // page 的入口
            entry: filePath, 
            // 模板來(lái)源，這里假設(shè)每個(gè) JS 文件對(duì)應(yīng)一個(gè)同名的 HTML 文件
            template: tmp + '.html', 
            // 在 dist/index.html 的輸出HTML 文件
            filename: filename + '.html', 
            // 頁(yè)面模板需要加對(duì)應(yīng)的js腳本，如果不加這行則每個(gè)頁(yè)面都會(huì)引入所有的js腳本
            chunks: ['manifest', 'vendor', filename], 
            inject: true,
        };
 
        if (configs) {
            conf = merge(conf, configs)
        }
 
        if (process.env.NODE_ENV === 'production') {
            conf = merge(conf, {
                minify: {
                    removeComments: true, // 刪除 html 中的注釋代碼
                    collapseWhitespace: true, // 刪除 html 中的空白符
                    // removeAttributeQuotes: true // 刪除 html 元素中屬性的引號(hào)
                },
                chunksSortMode: 'manual'// 按 manual 的順序引入
            })
        }
 
        map[filename] = conf
    })
 
    return map
}

/* vue.config.js */
 
const utils = require('./build/utils')
 
module.exports = {
    ...
    
    pages: utils.setPages(),
    
    ...
}

project/
├── file1.js
├── file2.txt
├── dir/
│   ├── file3.js
│   └── subdir/
│       └── file4.js