chain-saasui/build/webpack.common.js

chain-saasui

const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const pkg = require('../package.json');
const { dependencies = {}, devDependencies = {} } = pkg;

module.exports = {
    entry: path.resolve(__dirname, '../components/src'),
    mode: 'production',
    output: {
        path: path.resolve(__dirname, '../lib'),
        filename: 'saasui.common.js',
        chunkFilename: '[id].js',
        library: 'SAASUI',
        libraryTarget: 'commonjs2',
        libraryExport: 'default',
    },
    plugins: [
        new VueLoaderPlugin(),
        new MiniCssExtractPlugin({
            filename: 'styles/[name].css',
            chunkFilename: 'styles/[id].css',
        }),
    ],
    module: {
        rules: [
            {
                test: /\.vue$/,
                use: [
                    {
                        loader: 'vue-loader',
                    },
                ],
            },
            { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
            {
                test: /\.scss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
            },
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, loader: 'url-loader' },
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                '@babel/preset-env',
                                {
                                    targets: '> 0.25%, not dead',
                                },
                            ],
                        ],
                        plugins: [
                            '@babel/plugin-proposal-optional-chaining',
                            '@babel/plugin-proposal-nullish-coalescing-operator',
                        ],
                    },
                },
            },
        ],
    },
    externals: Object.keys({ ...dependencies, ...devDependencies }).reduce((externals, dep) => {
        externals[dep] = dep; // 将每个依赖排除在打包之外
        return externals;
    }, {}),
    resolve: {
        extensions: ['.js', '.vue', '.json'], // 添加你项目中用到的扩展名
        alias: {},
    },
};