@lipemat/js-boilerplate/config/webpack.dev.js

Dependencies and scripts for a no config JavaScript app

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const webpack_1 = require("webpack");
const react_refresh_webpack_plugin_1 = __importDefault(require("@pmmmwh/react-refresh-webpack-plugin"));
const path_1 = __importDefault(require("path"));
const fork_ts_checker_webpack_plugin_1 = __importDefault(require("fork-ts-checker-webpack-plugin"));
const config_1 = require("../helpers/config");
const entries_1 = require("../helpers/entries");
const package_config_1 = require("../helpers/package-config");
const postcssOptions = (0, config_1.getConfig)('postcss.config');
const babelOptions = (0, config_1.getConfig)('babel.config');
const cssLoaderOptions = (0, config_1.getConfig)('css-loader.config');
const devServerOptions = (0, config_1.getConfig)('dev-server.config');
// To allow line numbers to show up in console errors. @see React Error Boundaries.
babelOptions.plugins?.unshift('@babel/plugin-transform-react-jsx-source');
// To support React Fast Refresh.
babelOptions.plugins?.unshift('react-refresh/babel');
const plugins = [
    new webpack_1.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
    }),
    new react_refresh_webpack_plugin_1.default(),
];
// Loads a thread, which verifies any TypeScript on changes if the project has a "tsconfig.json" file.
if ('' !== (0, config_1.getTsConfigFile)()) {
    plugins.push(new fork_ts_checker_webpack_plugin_1.default({
        devServer: false,
        formatter: 'basic',
        typescript: {
            configFile: (0, config_1.getTsConfigFile)(),
        },
    }));
}
const config = {
    devtool: 'eval-source-map',
    entry: (0, entries_1.getEntries)(),
    mode: 'development',
    stats: 'minimal',
    externals: {
        jquery: 'jQuery',
    },
    target: 'browserslist:' + (0, config_1.getBrowsersList)().join(', '),
    output: {
        path: path_1.default.resolve((0, package_config_1.getPackageConfig)().workingDirectory, 'dist'),
        filename: '[name].js',
        publicPath: (0, package_config_1.getPackageConfig)().url + ':' + devServerOptions.port + '/js/dist/',
        chunkFilename: '[name].js',
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.pcss'],
        modules: [
            path_1.default.resolve((0, package_config_1.getPackageConfig)().workingDirectory, 'src'),
            'node_modules',
        ],
    },
    plugins,
    optimization: {
        moduleIds: 'named',
        emitOnErrors: false,
    },
    module: {
        strictExportPresence: true,
        rules: [
            {
                test: /\.[jt]sx?$/,
                loader: 'babel-loader',
                include: path_1.default.resolve((0, package_config_1.getPackageConfig)().workingDirectory, 'src'),
                exclude: /node_modules/,
                options: babelOptions,
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                ],
            },
            {
                test: /\.pcss$/,
                use: [
                    'style-loader',
                    {
                        loader: '@teamsupercell/typings-for-css-modules-loader',
                        options: {
                            banner: '// Autogenerated by typings-for-css-modules-loader.',
                            disableLocalsExport: true,
                            prettierConfigFile: path_1.default.resolve(__dirname, '../helpers/.prettierrc.json'),
                        },
                    },
                    {
                        loader: 'css-loader',
                        options: cssLoaderOptions,
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions,
                        },
                    },
                ].filter(loader => {
                    if (!(0, package_config_1.getPackageConfig)().cssTsFiles && 'object' === typeof loader) {
                        return loader.loader !== '@teamsupercell/typings-for-css-modules-loader';
                    }
                    return true;
                }),
            },
        ],
    },
};
exports.default = config;
module.exports = config;