cloudsplaining/vue.config.js at master · salesforce/cloudsplaining · GitHub

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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
const path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');

class InlineSourcePlugin {
    apply(compiler) {
        compiler.hooks.compilation.tap('InlineSourcePlugin', (compilation) => {
            const hooks = HtmlWebpackPlugin.getHooks(compilation);

            hooks.alterAssetTagGroups.tapAsync('InlineSourcePlugin', (data, cb) => {
                const getAssetSource = (assetName) => {
                    const asset = compilation.getAsset
                        ? compilation.getAsset(assetName)
                        : compilation.assets[assetName];
                    if (!asset) return null;
                    if (asset.source && typeof asset.source.source === 'function') {
                        return asset.source.source();
                    }
                    if (asset.source && typeof asset.source === 'function') {
                        return asset.source();
                    }
                    return asset.source || null;
                };

                const inlineTag = (tag) => {
                    if (tag.tagName === 'script' && tag.attributes && tag.attributes.src) {
                        const assetName = tag.attributes.src.replace(/^\//, '');
                        const source = getAssetSource(assetName);
                        if (source) {
                            return {
                                tagName: 'script',
                                voidTag: false,
                                attributes: { type: 'application/javascript' },
                                innerHTML: source
                            };
                        }
                    }

                    if (tag.tagName === 'link' && tag.attributes && tag.attributes.href) {
                        const rel = tag.attributes.rel || '';
                        if (rel.toLowerCase() === 'stylesheet') {
                            const assetName = tag.attributes.href.replace(/^\//, '');
                            const source = getAssetSource(assetName);
                            if (source) {
                                return {
                                    tagName: 'style',
                                    voidTag: false,
                                    attributes: { type: 'text/css' },
                                    innerHTML: source
                                };
                            }
                        }
                    }

                    return tag;
                };

                data.headTags = data.headTags.map(inlineTag);
                data.bodyTags = data.bodyTags.map(inlineTag);
                cb(null, data);
            });
        });
    }
}
// const PreloadWebpackPlugin = require('preload-webpack-plugin');

module.exports = {
    publicPath: '',
    outputDir: path.resolve(__dirname, 'cloudsplaining', 'output', 'dist'),
    filenameHashing: false,
    pages: {
        index: {
            // entry for the page
            entry: 'cloudsplaining/output/src/main.js',
            // the source template
            template: 'cloudsplaining/output/public/index.html',
            // output as dist/index.html
            filename: 'index.html',
            chunks: ['chunk-vendors', 'index']
        },
    },
    css: {extract: false},

    chainWebpack: config => {
        // config.output
        //     .filename = '[name].bundle.js';
        if (process.env.NODE_ENV === 'development') {
            config.plugins
                .delete('preload')
                .delete('prefetch');
        }
        config
            .plugin('inline-source-plugin')
            .use(InlineSourcePlugin)
        config
            .plugin('html-index')
            .tap((args) => {
                args[0] = {
                    ...(args[0] || {}),
                    inlineSource: '.(js|css)$',
                    inject: 'body',
                    scriptLoading: 'blocking',
                    template: 'cloudsplaining/output/public/index.html',
                    title: 'Cloudsplaining report',
                };
                return args;
            });
        config.optimization
            .splitChunks({
                name: false,
                chunks: 'async',
                hidePathInfo: true,
            });
        config.module
            .rule('md')
                .test(/\.md$/)
                .type('asset/source')
    }
}