Visualforce Template Webpack Plugin

This is a Webpack plugin that simplifies the updating of your Visualforce page(s)/component(s) by embedding your static resource file(s) as script and link tags.

More about referencing static resource files in Visualforce markup here.

Before Webpack Compilation:

App.page

<apex:page>

    <!--% styles %-->
    <!--% styles %-->

    <apex:pageBlock>
    ...
    </apex:pageBlock>
    ...
    <!--% scripts %-->
    <!--% scripts %-->

</apex:page>

After Webpack Compilation:

App.page

<apex:page>

    <!--% styles %-->
    <link type="text/css" rel="stylesheet" href="{!$Resource.dist, 'main.css')}" />
    <!--% styles %-->

    <apex:pageBlock>
    ...
    </apex:pageBlock>
    ...
    <!--% scripts %-->
    <script type="text/javascript" src="{!$Resource.dist, 'bundle.js')}"></script>
    <!--% scripts %-->

</apex:page>

Install

npm i visualforce-template-webpack-plugin --save-dev

Read Before Moving On!

Do not put anything between  comment tags. They will be erased!!

Configuration

Step 1: Visualforce Template Declaration

In your Visualforce Page, you need to declare where you want the assets to generate.

% scripts % for your js files and % styles % for your css files

Spacing does not matter

, , or 

App.page

<apex:page>
    <head>
        <!--% styles %-->
        <!-- WARNING: Do NOT Put anything [HERE]. Will get erased -->
        <!--% styles %-->
    </head>
    <body>
        <apex:form>
            ...
        </apex:form>
        <script>
            //put non webpack/global javascript here
        </script>
        <!--% scripts %-->
        <!-- WARNING: Do NOT Put anything [HERE]. Will get erased -->
        <!--% scripts %-->
    </body>
</apex:page>

Step 2: Import/Require Plugin into Webpack config file

webpack.config.js

const VisualforcePlugin = require('visualforce-template-webpack-plugin')

Step 3: Add a new instance of the Imported/Required Plugin configuration

webpack.config.js

//From Step 1
const VisualforcePlugin = require('visualforce-template-webpack-plugin')

module.exports = {
    entry: './index.js',
    output: {
        filname: '[name].bundle.js',
        path: "./force-app/main/default/staticresources/dist"
    },
    plugins: [
        // Add a new instance here
        new VisualforcePlugin({
            page: './force-app/default/main/pages/App.page'
        })
    ]
}

Options

Plugin accepts `{Object}` or `{Array}` of objects w/ the following data structure

Name	Type	Default	Required	Description
`entry`	`{String} or {Array} of strings`	`main`	`false`	Name of entry configuration key name. Needs to match your webpack config entry names. Defaults to all entrypoint assets if none specified.
`page`	`{String}`	`undefined`	`true`	Relative path to your visualforce page or component file
`scriptHook`	`{Function}`	`undefined`	false	Callback function to modify `src` and other attributes on script tag
`styleHook`	`{Function}`	`undefined`	false	Function to hook into modifying attributes of link tags

entry

You can filter out entrypoint assets you wish to not include in the page.

Example: webpack.config.js

modules.exports = {
    entry: {
        app: './app.js',
        main: './main.js',
        mobile: './mobile.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, "force-app/main/default/staticresources/dist"),
    },
    plugins: [
        new VisualforceTemplate({
            entry: ['app', 'main'],  // mobile entry is not included
            page: path.resolve(__dirname, 'force-app/main/default/pages/App.page')
        })
    ]
}

page

*You can optionally update a Visualforce Component as well*

Example: webpack.config.js

modules.exports = {
    entry: './app.js',
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, "force-app/main/default/staticresources/dist"),
    },
    plugins: [
        new VisualforceTemplate({
            page: path.resolve(__dirname, 'force-app/main/default/components/[Name].component')
        })
    ]
}

[Name].component

<apex:component>
    <!--% scripts %-->
    <script type="text/javascript" src="{!URLFOR($Resource.dist, 'main.bundle.js')}"></script>
    <!--% scripts %-->
</apex:component>

scriptHook

Script Tag Attribute Defaults

Name	Default
`type`	`text/javascript`
`src`	`[Depends on output in static resource]`
`async`	`false`
`defer`	`false`
`nomodule`	`false`

How to overide defaults: Return an Object and setting any of the properties in the table above. Only need to include the script tag attributes you wish to change. The function is passed an object containing:

scriptHook: (scriptData) => {
    const { resourceName, resourceFilePath } = scriptData;
    // ...
    return { 
        src: `${resourceName}/${resourceFilePath}`
    } 
}

examples of using the options

new VisualforcePlugin({
        entry: 'app',
        page: path.resolve(__dirname, "./force-app/default/main/pages/App.page"),
        scriptHook: ({ resourceName, resourceFilePath }) => {
            // ...
            return {
                src: `{!URLFOR($Resource.${resourceName}, '${resourceFilePath}')}`,
                type: 'text/javascript'
            }
        }
    })

styleHook

Style Tag Attribute Defaults

Name	Default
`rel`	`stylesheet`
`href`	`[Depends on output in static resource]`
`type`	`text/css`

How to overide defaults: Return an Object and setting any of the properties in the table above. Only need to include the script tag attributes you wish to change. The function is passed an object containing:

new VisualforcePlugin({
        entry: 'app',
        page: path.resolve(__dirname, "./force-app/default/main/pages/App.page"),
        styleHook: ({ resourceName, resourceFilePath }) => {
            return {
                rel: 'stylesheet',
                href: ``,
                type: ''
            };
        }
})

Example(s)

View More Examples Here

webpack.config.js

const path = require('path')
const VisualforcePlugin = require('visualforce-template-webpack-plugin')

module.exports = {
    entry: {
        app: './index.js'
    },
    output: {
        filename: 'bundle.js'
        path: path.resolve(__dirname, "./force-app/main/default/staticresources/dist")
    },
    plugins: [
        new VisualforcePlugin({
            entry: 'app',
            page: './force-app/default/main/pages/App.page'
        })
    ]
}

Before:

App.page

<apex:page>
    <apex:pageBlock>
    ...
    </apex:pageBlock>
    ...
    <!--% scripts %-->
    <!--% scripts %-->
</apex:page>

After:

App.page

<apex:page>
    <apex:pageBlock>
    ...
    </apex:pageBlock>
    ...
    <!--% scripts %-->
    <script type="text/javascript" src="{!$Resource.dist, 'bundle.js')}"></script>
    <!--% scripts %-->
</apex:page>

Updating Multiple Visualforce File(s)

example of updating more than one visualforce page/component w/ multiple entries

webpack.config.js

const path = require('path')
const VisualforcePlugin = require('visualforce-template-webpack-plugin')

module.exports = {
    entry: {
        app: './app.js',
        admin: '/admin.js',
        mobile: './admin.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, "./force-app/main/default/staticresources/dist")
    },
    plugins: [
        new VisualforcePlugin([{   
                entry: 'app',
                page: path.resolve(__dirname, "./force-app/main/default/pages/App.page") 
            },
            {
                entry: 'admin',
                page: path.resolve(__dirname, "./force-app/main/default/pages/Admin.page")
            },
            {
                entry: 'mobile',
                page: path.resolve(__dirname, "./force-app/main/default/pages/AppSf1.page")
        }])
    ]
}

Name		Name	Last commit message	Last commit date
Latest commit History 12 Commits
examples		examples
src		src
.babelrc		.babelrc
.gitIgnore		.gitIgnore
LICENSE.txt		LICENSE.txt
README.md		README.md
package-lock.json		package-lock.json
package.json		package.json
schema.json		schema.json

License

mjyocca/visualforce-template-webpack-plugin

Folders and files

Latest commit

History

Repository files navigation

Visualforce Template Webpack Plugin

Before Webpack Compilation:

After Webpack Compilation:

Install

Read Before Moving On!

Configuration

Step 1: Visualforce Template Declaration

In your Visualforce Page, you need to declare where you want the assets to generate.

Spacing does not matter

Step 2: Import/Require Plugin into Webpack config file

Step 3: Add a new instance of the Imported/Required Plugin configuration

Options

Plugin accepts {Object} or {Array} of objects w/ the following data structure

entry

page

scriptHook

examples of using the options

styleHook

Example(s)

Before:

After:

Updating Multiple Visualforce File(s)

About

Topics

Resources

License

Stars

Watchers

Forks

Languages

Plugin accepts `{Object}` or `{Array}` of objects w/ the following data structure