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' }
        ],
    },
    externals: Object.keys({ ...dependencies, ...devDependencies }).reduce((externals, dep) => {
        externals[dep] = dep; // 将每个依赖排除在打包之外
        return externals;
    }, {}),
    resolve: {
        extensions: ['.js', '.vue', '.json'], // 添加你项目中用到的扩展名
        alias: {

        },
    },
};