aktivisda-canva-like/vue.config.js

const webpack = require('webpack');
const localConfig = require('./src/assets/local/localconfig.json');
const templates = require('./src/assets/local/data/templates.json')['templates'];
const templatesRoutes = templates.map((template) => `/edit/${template.id}`);
const path = require('path');

const SitemapPlugin = require('sitemap-webpack-plugin').default;
// const PrerenderSPAPlugin = require('prerender-spa-plugin');
const { FontsPlugin } = require('./web_plugins/fonts');
const CopyPlugin = require('copy-webpack-plugin');

// const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

const all_langs = require('./src/assets/langs.json');
const langs = all_langs.filter((lang) => localConfig['availableLangs'].indexOf(lang.code) >= 0);

const moment = require('moment');

const today = moment().format('YYYY-MM-DDThh:mm:ss');

const withoutLang = [
    { path: '/' },
    { path: '/colors' },
    { path: '/fonts' },
    { path: '/backgrounds' },
    { path: '/symbols' },
    { path: '/qrcode' },
    { path: '/edit' },
].concat(templatesRoutes.map((path) => ({ path: path })));

let paths = [];
paths = paths.concat(
    withoutLang.map((path) => {
        return { path: path.path };
    }),
);

for (const lang of langs) {
    paths = paths.concat(
        withoutLang.map((path) => {
            return { path: '/' + lang.code + path.path };
        }),
    );
}

const plugins = [
    new webpack.DefinePlugin({
        BUILD_UPDATE: JSON.stringify(today),
    }),
    new SitemapPlugin({
        base: localConfig.url,
        paths: paths,
        options: {
            filename: 'sitemap.xml',
            lastmod: true,
        },
    }),
    new FontsPlugin({
        fonts: require('./src/assets/local/data/fonts.json'),
        outputFile: 'static/fonts/fonts.css',
        aktivisda: require('./package.json').version,
    }),
    new CopyPlugin({
        patterns: [
            {
                from: './node_modules/@neslinesli93/mozjpeg-wasm/lib/mozjpeg-wasm.wasm',
                to: './js/mozjpeg_wasm.wasm',
            },
            {
                from: './src/plugins/compress/converters/oxipng/oxipng_bg.wasm',
                to: './js/oxipng.wasm',
            },
        ],
        options: {},
    }),
];

if (process.env.NODE_ENV === 'production') {
    plugins.push(
        // new PrerenderSPAPlugin({
        //     staticDir: path.join(__dirname, 'dist', 'aktivisda'),
        //     registry: undefined,
        //     routes: paths.map((path) => path.path),
        //     renderer: new Renderer({
        //         onlyProduction: true,
        //         maxConcurrentRoutes: 8,
        //         renderAfterDocumentEvent: 'x-app-rendered',
        //         renderAfterTime: 50000,
        //         headless: true,
        //         injectProperty: '__prerender',
        //         // Optional - Any values you'd like your app to have access to via `window.injectProperty`.
        //         inject: {},
        //     }),
        //     minify: {
        //         collapseBooleanAttributes: true,
        //         collapseWhitespace: true,
        //         decodeEntities: true,
        //         keepClosingSlash: true,
        //         sortAttributes: true,
        //     },
        //     // // // TODO bug avec webpack 5 (voir https://www.npmjs.com/package/@dreysolano/prerender-spa-plugin)
        //     postProcess(renderedRoute) {
        //         // Ignore any repdirects.
        //         renderedRoute.route = renderedRoute.originalRoute;
        //         // Remove /index.html from the output path if the dir name ends with a .html file extension.
        //         // For example: /dist/dir/special.html/index.html -> /dist/dir/special.html
        //         if (renderedRoute.route.endsWith('.html')) {
        //             renderedRoute.outputPath = path.join(__dirname, 'dist', 'aktivisda', renderedRoute.route);
        //         } else {
        //             renderedRoute.outputPath = path.join(__dirname, 'dist', 'aktivisda', renderedRoute.route, 'index.html');
        //         }
        //         return renderedRoute;
        //     },
        // }),
    );
}

module.exports = {
    publicPath: process.env.VUE_APP_NAME === 'aktivisda' ? '/' : '/backtivisda/',
    outputDir: `dist/${process.env.VUE_APP_NAME}`,
    chainWebpack: (config) => {
        config.plugin('html').tap((args) => {
            args[0].title = localConfig.name;
            return args;
        });

        if (process.env.VUE_APP_NAME === 'backtivisda') {
            config.plugin('copy').tap((options) => {
                options[0][0].ignore.push('static/backgrounds/**/*');
                options[0][0].ignore.push('static/symbols/**/*');
                options[0][0].ignore.push('static/templates/**/*');
                return options;
            });
        }

        config.module
            .rule('vue')
            .use('vue-loader')
            .loader('vue-loader')
            .tap((options) => {
                options.hotReload = false;
                return options;
            });

        config.module
            .rule('svgz')
            .test(/\.svgz$/)
            .use('file-loader')
            .loader('file-loader')
            .options({ name: 'img/[name].[ext]' })
            .end();
    },
    configureWebpack: {
        plugins,
        resolve: {
            alias: {
                '@datastore': path.resolve('src', process.env.VUE_APP_NAME, 'datastore.js'),
                '@navbar': path.resolve('src', process.env.VUE_APP_NAME, 'components', 'navbar.vue'),
            },
        },
    },
};