Exporting Javascript and CSS for Wordpress

[twalkerspire]

Summary

tldr: I basically want to run a command and have storybook/webpack generate and export minified css and js versions that I can use outside of storybook on any site by just added the css and js. So it would just be two files, a css and js file, that I can give to backend developer and they can add it to the site and be able to use the js and css from storybook.

Is this possible? if so, how?

Hello all,

I am currently using storybook as a component library for wordpress.

What I am trying to do is create a "build" that will allow webpack to bundle up the CSS and JS and place it in a ./dist folder where we can grab the css and js to enqueue into wordpress.

I've figured out a webpack config that generates minified versions of the css and js but the issue is that the JS but the issue is that the javascript is never being run when it is added on the wordpress site.

I've also done some experimenting with standalone sites and i run into the same issue where the JS is never being ran.

I am wondering am i doing anything wrong?

Additional information

`/** @type { import('@storybook/html-webpack5').StorybookConfig } */

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const webpack = require('webpack')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const RemovePlugin = require('remove-files-webpack-plugin')
const StylelintPlugin = require('stylelint-webpack-plugin')

const { resolve, join } = require('path')
const config = {
stories: [
'../src/_stories/Welcome.mdx',
'../src/_stories//*.mdx',
'../src/_stories//*.stories.@(js|jsx|mjs|ts|tsx)',
],

staticDirs: [
    { from: '../src/assets/visuals/', to: 'visuals/' },
    { from: '../src/assets/fonts/', to: 'fonts/' },
    { from: '../src/assets/icons', to: '/icons' },
],

webpackFinal: async (config, { configType }) => {
    const currentEntry = config.entry

    config.entry = {
        main: currentEntry,
        customJs: {
            import: resolve(__dirname, '../src/assets/js/main.js'),
            filename: `js/main.js`,
        },
    }

    config.devtool = 'source-map' // Turning on sourcemaps for debugging. Note: This slows down hot reloading but its only a minor inconvience for the payoff of having sourcemaping. If things slow down too much we'll need to consider another sourcemap option from webpack. See: https://webpack.js.org/configuration/devtool/ )

    config.plugins = [
        ...config.plugins,
        // new StylelintPlugin({ configFile: './config/stylelintrc.yaml' }),
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
            chunkFilename: 'css/[id].css',
        }),
        new webpack.ProvidePlugin({
            // global JS (no import needed)
            $: 'jquery',
            jQuery: 'jquery',
        }),
        new RemovePlugin({
            after: {
                include: [
                    './dist/css/main.css.map',
                    './dist/js/custom.js.map',
                    './dist/js/custom.js.LICENSE.txt',
                ],
                log: false,
                logWarning: false,
            },
        }),
    ]
    config.optimization = {
        minimize: true,
        runtimeChunk: 'single',
        minimizer: [new CssMinimizerPlugin(), new TerserPlugin()],
    }
    config.module.rules.push({
        test: /\.s?css$/,
        use: [
            MiniCssExtractPlugin.loader,
            {
                loader: 'css-loader',
                options: {
                    url: false, // Setting to false so webpack doesn't replace the url paths of assets being used in css.
                },
            },
            {
                loader: 'postcss-loader',
                options: {
                    postcssOptions: {
                        plugins: () => [require('autoprefixer')],
                    },
                },
            },
            {
                loader: 'sass-loader',
                options: {
                    sassOptions: {
                        includePaths: [
                            './node_modules/@uswds',
                            './node_modules/@uswds/uswds/packages',
                            'node_modules/foundation-sites/scss',
                        ],
                    },
                },
            },
        ],
    })

    config.resolve = {
        extensions: [
            '.scss',
            '.js',
            '.json',
            '.jsx',
            '.gif',
            '.ico',
            '.png',
            '.jpg',
            '.jpeg',
            '.svg',
        ],
    }
    config.module.rules.push({
        test: /\.(svg|ico|jpg|jpeg|png|apng|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/,
        type: 'asset/resource',
        generator: { filename: 'static/media/[path][name][ext]' },
    })
    config.module.rules.push({
        test: /\.hbs$/,
        loader: 'handlebars-loader',
    })

    return config
},

addons: [
    '@whitespace/storybook-addon-html',
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-webpack5-compiler-swc',
    '@chromatic-com/storybook',
    '@storybook/addon-a11y',
],

framework: {
    name: '@storybook/react-webpack5',
    options: {
        builder: {},
    },
},

docs: {
    autodocs: false,
},

}
export default config
`

Create a reproduction

No response