admin-templates

Templates

• First install the required npm modules

npm i @babel/cli @babel/core @babel/plugin-external-helpers @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread @babel/plugin-transform-modules-commonjs @babel/plugin-transform-modules-umd @babel/polyfill @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli --save-dev

• Update .babelrc file

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "browsers": [
                        "last 2 versions",
                        "ie >= 10"
                    ],
                },
                "useBuiltIns": "usage",
            }
        ],
        "@babel/preset-react"
    ],
    "plugins": [
        "@babel/plugin-proposal-object-rest-spread",
        "@babel/plugin-proposal-class-properties",
        "@babel/plugin-transform-modules-commonjs"
    ]
}

• Create webpack.config.js

const path = require('path');
const webpack_rules = [];

module.exports = {
    mode: 'development',
    entry: './dist/index.js',
    node: {
        fs: 'empty'
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'bundle.js',
        libraryTarget: 'umd'
    },
    module: {
        rules: webpack_rules
    }
};

let babelLoader = {
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
        loader: 'babel-loader',
        options: {
            presets: ['@babel/preset-env']
        }
    }
};

let cssLoader = {
    test: /\.css$/,
    use: ['style-loader', 'css-loader']
};

webpack_rules.push(babelLoader);
webpack_rules.push(cssLoader);

• Then run build:template:component & build:webpack