Noticeably Playful Monkeys

    @airtable/blocks-webpack-bundler
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.2 • Public • Published

    @airtable/blocks-webpack-bundler

    This is a webpack bundler that can be used with @airtable/blocks-cli@beta. This bundler allows you to customize the webpack config that is used when developing and bundling your Airtable app.

    Installation

    Install this package as a dependency of your Airtable app. Inside your app project folder, run

    npm install @airtable/blocks-webpack-bundler --save-dev
    

    Customization

    • Create a file named bundler.js inside your app project folder with the following contents:
    const createBundler = require('@airtable/blocks-webpack-bundler').default;
    
    function createConfig(baseConfig) {
        // Add any desired customizations here
        return baseConfig;
    }
    
    exports.default = () => {
        return createBundler(createConfig);
    };
    • Inside your block.json file, add a "bundler" field, with a "module" field inside that points to your bundler file.
    {
        "version": "1.0",
    -   "frontendEntry": "./frontend/index.js"
    +   "frontendEntry": "./frontend/index.js",
    +   "bundler": {
    +       "module": "./bundler.js"
    +   }
    }

    Example

    Here are some examples of how you can customize the webpack config via the bundler.js file.

    Support Sass/SCSS files:

    const createBundler = require('@airtable/blocks-webpack-bundler').default;
    
    function createConfig(baseConfig) {
        baseConfig.module.rules.push({
            test: /\.s[ac]ss$/i,
            use: [
                // Make sure you have installed these loaders in your package.json as well!
                // See https://webpack.js.org/loaders/sass-loader/ for more info
                'style-loader',
                'css-loader',
                'sass-loader',
            ],
        });
        return baseConfig;
    }
    
    exports.default = () => {
        return createBundler(createConfig);
    };

    Support using flow to write your app:

    const createBundler = require('@airtable/blocks-webpack-bundler').default;
    
    function createConfig(baseConfig) {
        baseConfig.module.rules.push({
            test: /\.js$/,
            exclude: [/node_modules/],
            loader: 'babel-loader',
            options: {
                babelrc: false,
                configFile: false,
                presets: [
                    require.resolve('@babel/preset-env'),
                    require.resolve('@babel/preset-react'),
                    // Make sure you have installed this in your package.json by running
                    // `npm install @babel/preset-flow --save-dev`
                    require.resolve('@babel/preset-flow'),
                ],
            },
        });
        return baseConfig;
    }
    
    exports.default = () => {
        return createBundler(createConfig);
    };

    Keywords

    none

    Install

    npm i @airtable/blocks-webpack-bundler

    DownloadsWeekly Downloads

    298

    Version

    0.0.2

    License

    UNLICENSED

    Unpacked Size

    26.7 kB

    Total Files

    16

    Last publish

    Collaborators

    • hongda.jiang
    • willpowelsonat
    • naitiy
    • emilia.gabryszewska
    • airtabledoug
    • airtable_ops_team_production
    • djmally-airtable
    • emma_airtable
    • jeroenransijn
    • jichu4n
    • kahseng_at
    • maryrosecook
    • philipl-airtable
    • richsinn
    • s2tephen
    • seandonoghue
    • shrey-at
    • somehats
    • syrnick
    • timdeng-at
    • manan_at
    • fredz-at
    • seankeenan-at
    • adarlieberdembo
    • jamesmoody-at
    • kevinwilde-at