# webpack 多页应用打包方案

# 基本思路

  • 每个页面对应一个 entry,一个 html-webpack-plugin

    缺点: 每次新增或删除页面需要改 webapck 配置

  • 动态获取 entry 和设置 html-webapck-plugin 数量

  • 利用 glob.sync

    // 约定文件规则
    module.exports = {
        entry: {
            index: './src/index/index.js',
            b: './src/b/index.js'
        }
    }
    
    // 动态获取
    npm i glob -D
    module.exports = {
        entry: glob.sync(path.join(__dirname, './src/*/index.js'))
    }
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13

# 如何打包

const setMPA = () => {
    const entry = {};
    const htmlWebpackPlugins = [];
    const entryFiles = glob.sync(path.join(__dirname, './src/*/index.js'));

    Object.keys(entryFiles)
        .map((index) => {
            const entryFile = entryFiles[index];
            // '/Users/cpselvis/my-project/src/index/index.js'

            const match = entryFile.match(/src\/(.*)\/index\.js/);
            const pageName = match && match[1];

            entry[pageName] = entryFile;
            htmlWebpackPlugins.push(
                new HtmlWebpackPlugin({
                    inlineSource: '.css$',
                    template: path.join(__dirname, `src/${pageName}/index.html`),
                    filename: `${pageName}.html`,
                    chunks: ['vendors', pageName],
                    inject: true,
                    minify: {
                        html5: true,
                        collapseWhitespace: true,
                        preserveLineBreaks: false,
                        minifyCSS: true,
                        minifyJS: true,
                        removeComments: false
                    }
                })
            );
        });

    return {
        entry,
        htmlWebpackPlugins
    }
}

const { entry, htmlWebpackPlugins } = setMPA();

module.exoprts = {
    entry: entry
    plugins: [
    	...
    ].concat(htmlWebpackPlugins)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
更新于: 2/10/2020, 11:14:21 AM