chain-saasui/build/webpack.components.js

chain-saasui

const path = require("path");
const { VueLoaderPlugin } = require("vue-loader");
const glob = require("glob");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const list = {};
async function makeList(dirPath, list) {
    const files = glob.sync(`${dirPath}/**/index.js`);
    for (let file of files) {
        const component = file.split(/[/.]/)[2];
        list[component] = `./${file}`;
    }
}
makeList("components/src", list);
const NODE_ENV = process.env.NODE_ENV ? process.env.NODE_ENV.trim() : "";
const isDevelopment = NODE_ENV === 'development'; // trim

module.exports = {
    entry: list,
    mode: "production",
    output: {
        path: path.resolve(__dirname, "../lib"),
        filename: '[name].js',
        chunkFilename: '[id].js',
        library: 'SAASUI',
        libraryExport: 'default',
        libraryTarget: 'umd',
        umdNamedDefine: true,
        globalObject: 'typeof self !== \'undefined\' ? self : this'
    },
    // output: {
    //     filename: '[name].js',  // 输出文件名
    //     chunkFilename: '[id].js',
    //     path: path.resolve(__dirname, '../lib'),
    //     libraryTarget: 'commonjs2',  // 使用 CommonJS 格式
    // },
    watch: isDevelopment, // 实时打包
    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' }
        ],
    },
    resolve: {
        extensions: ['.js', '.vue', '.json'], // 添加你项目中用到的扩展名
        alias: {
            vue$: "vue/dist/vue.esm.js", // 使用完整版 Vue
        },
    },
};