jarvis-react/lib/config/webpack.js

React脚手架及命令行工具合集

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.getWebpackConfig = void 0;
const webpack_1 = require("webpack");
const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
const esbuild_loader_1 = require("esbuild-loader");
const react_refresh_webpack_plugin_1 = __importDefault(require("@pmmmwh/react-refresh-webpack-plugin"));
const html_webpack_plugin_1 = __importDefault(require("html-webpack-plugin"));
const function_1 = require("../util/function");
const babel_1 = require("./babel");
function getStyleRules(type, options) {
    const { isDevelopment, sourceMap, themes = {} } = options;
    const rules = [
        {
            loader: mini_css_extract_plugin_1.default.loader,
            options: {
                esModule: true,
            },
        },
        {
            loader: require.resolve('css-loader'),
            options: {
                importLoaders: type === 'less' ? 1 : 0,
                sourceMap: sourceMap,
                modules: {
                    auto: true,
                },
            },
        },
    ];
    // 开发模式下使用style-loader
    if (isDevelopment) {
        rules.splice(0, 1, {
            loader: require.resolve('style-loader'),
        });
    }
    if (type === 'less') {
        rules.push({
            loader: require.resolve('less-loader'),
            options: {
                lessOptions: {
                    modifyVars: { ...themes },
                    javascriptEnabled: true,
                },
            },
        });
    }
    return rules;
}
function getWebpackConfig(options) {
    const { outDir = 'dist', sourceMap = false, isDevelopment } = options;
    const babelConfig = babel_1.getBabelConfig({ ...options, buildType: 'esm' });
    const config = {
        mode: 'production',
        bail: true,
        devtool: sourceMap ? 'cheap-module-source-map' : false,
        performance: false,
        entry: function_1.resolveProjectFile('src/app.tsx'),
        output: {
            path: function_1.resolveProjectFile(outDir),
            filename: 'jarvis.[contenthash:8].js',
            publicPath: './',
        },
        infrastructureLogging: {
            level: 'none',
        },
        optimization: {
            minimize: true,
            minimizer: [
                new esbuild_loader_1.ESBuildMinifyPlugin({
                    target: 'es2015',
                    css: true,
                }),
            ],
        },
        resolve: {
            modules: ['node_modules'],
            extensions: ['.tsx', '.ts', '.jsx', '.js'],
            alias: {
                '@': function_1.resolveProjectFile('src'),
            },
        },
        module: {
            strictExportPresence: true,
            rules: [
                {
                    oneOf: [
                        {
                            test: /\.svg$/,
                            type: 'asset/inline',
                        },
                        {
                            test: /\.(bmp|gif|jpe?g|png)$/,
                            type: 'asset',
                            parser: {
                                dataUrlCondition: {
                                    maxSize: 10240,
                                },
                            },
                        },
                        {
                            test: /\.(tsx|ts|jsx|js)$/,
                            loader: require.resolve('babel-loader'),
                            include: function_1.resolveProjectFile('src'),
                            options: { ...babelConfig },
                        },
                        {
                            test: /\.css$/,
                            use: [...getStyleRules('css', options)],
                        },
                        {
                            test: /\.less$/,
                            use: [...getStyleRules('less', options)],
                        },
                        {
                            exclude: [/\.(jsx|tsx|js|ts|html|json)$/],
                            type: 'asset/resource',
                        },
                    ],
                },
            ],
        },
        plugins: [
            new html_webpack_plugin_1.default({
                inject: true,
                template: function_1.resolveProjectFile('public/index.html'),
            }),
            new mini_css_extract_plugin_1.default({
                filename: '[name].[contenthash:8].css',
                chunkFilename: '[name].[contenthash:8]-chunk.css',
            }),
        ],
    };
    if (isDevelopment) {
        config.mode = 'development';
        config.devtool = 'cheap-module-source-map';
        config.output.publicPath = '/';
        config.output.filename = 'jarvis.js';
        config.cache = {
            type: 'filesystem',
            cacheDirectory: function_1.resolveProjectFile('node_modules/.cache'),
        };
        config.optimization.minimize = false;
        config.plugins.pop();
        config.plugins.push(new webpack_1.ProgressPlugin(), new webpack_1.HotModuleReplacementPlugin(), new react_refresh_webpack_plugin_1.default({
            overlay: false,
        }));
    }
    return config;
}
exports.getWebpackConfig = getWebpackConfig;