webpack.base.config.js

/* eslint-disable no-console */

const webpack = require('webpack');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const isLocal = process.env.NODE_ENV === 'local';
const isProd = process.env.NODE_ENV === 'production';
const isDev = !isLocal && !isProd;
const logLevel = process.env.LOG_LEVEL || 'debug';
const nodeEnv = isProd ? 'production' : 'development';

console.log(`Webpack building for NODE_ENV: ${nodeEnv}`);

function getCssLoaders(config) {
    const addlLoaders = [
        ...(config.enablePostCss ? [{
            loader: 'postcss-loader',
            options: config.postCssOpts,
        }] : []),
    ];

    const cssLoaders = [
        {
            loader: 'css-loader',
            options: {
                // Required to work with css-loader@4
                // https://github.com/vuejs/vue-style-loader/issues/46#issuecomment-670624576
                esModule: false,
                // Number of loaders applied prior to css-loader
                // See https://vue-loader.vuejs.org/guide/pre-processors.html#postcss
                importLoaders: addlLoaders.length,
            },
        },
        ...addlLoaders,
    ];

    if (config.type === 'server') {
        if (config.extractCss) {
            if (!cssLoaders[0].options.modules) {
                cssLoaders[0].options.modules = {};
            }
            cssLoaders[0].options.modules.exportOnlyLocals = true;
            return [...cssLoaders];
        }

        return ['vue-style-loader', ...cssLoaders];
    }

    if (config.extractCss) {
        return [MiniCssExtractPlugin.loader, ...cssLoaders];
    }

    return ['vue-style-loader', ...cssLoaders];
}

function fileLoaderName() {
    const hash = process.env.NODE_ENV === 'production' ? '-[contenthash]' : '';
    return `images/[name]${hash}.[ext]`;
}

module.exports = {
    isDev,
    isLocal,
    isProd,
    logLevel,
    getBaseConfig(config) {
        return {
            mode: nodeEnv,
            output: {
                publicPath: '/dist/',
                filename: isProd ? '[name].[chunkhash].js' : '[name].js',
                chunkFilename: isProd ? '_[name].[chunkhash].js' : '_[name].js',
            },
            module: {
                rules: [
                    {
                        test: /\.vue$/,
                        loader: 'vue-loader',
                    },

                    // Only include the themed style loader if a theme is
                    // specified
                    ...(config.theme ? [{
                        test: /\.vue$/,
                        loader: 'vue-themed-style-loader',
                        options: {
                            theme: config.theme,
                        },
                    }] : []),

                    // Only include the i18n-loader if specified
                    ...(config.i18nBlocks ? [{
                        resourceQuery: /blockType=i18n/,
                        loader: '@intlify/vue-i18n-loader',
                    }] : []),

                    // Only include babelLoader if specified - useful to turn
                    // this off for the server build
                    ...(config.babelLoader ? [{
                        test: /\.js$/,
                        loader: 'babel-loader',
                        // Allow a15-js-service and vue-ssr-build to be run through
                        // babel since we don't pre-transpile them
                        exclude: /node_modules\/(?!(a15-js-service|vue-ssr-build)\/).*/,
                        options: {
                            cacheDirectory: true,
                        },
                    }] : []),

                    {
                        test: /\.css$/,
                        use: getCssLoaders(config),
                    },
                    {
                        test: /\.scss$/,
                        use: [
                            ...getCssLoaders(config),
                            {
                                loader: 'sass-loader',
                                ...(config.sassLoaderData ? {
                                    options: {
                                        additionalData: config.sassLoaderData,
                                    },
                                } : {}),
                            },
                        ],
                    },
                    {
                        test: /\.(png|jpe?g|gif|ttf|woff2?|eot)$/,
                        use: {
                            loader: 'url-loader',
                            options: {
                                limit: 8192,
                            },
                        },
                    },
                    {
                        test: /\.svg$/,
                        oneOf: [{
                            resourceQuery: /inline/,
                            use: {
                                loader: 'svg-inline-loader',
                                options: config.svgInlineLoaderOptions || {},
                            },
                        }, {
                            resourceQuery: /http/,
                            use: {
                                loader: 'file-loader',
                                options: {
                                    name: fileLoaderName,
                                },
                            },
                        }, {
                            test: /\.svg$/,
                            use: {
                                // See: https://iamakulov.com/notes/optimize-images-webpack/
                                loader: 'svg-url-loader',
                                options: {
                                    limit: 8192,
                                    name: fileLoaderName,
                                },
                            },
                        }],
                    },
                ],
            },
            plugins: [
                new webpack.DefinePlugin({
                    'process.env.NODE_ENV': JSON.stringify(nodeEnv),
                }),
                new VueLoaderPlugin(),
                ...(config.extractCss ? [
                    new MiniCssExtractPlugin({
                        filename: isProd ? 'app.[contenthash].css' : 'app.css',
                        chunkFilename: isProd ? '[name].[contenthash].css' : '[name].css',
                        insert: config.cssInsert,
                    }),
                ] : []),
            ],
        };
    },
};