Visualforce Template Webpack Plugin
This is a Webpack plugin that simplifies the updating of your Visualforce pages by automatically including your static resource file(s) references as script and link tags. More about referencing static resource files in Visualforce markup here.
Install
npm i visualforce-template-webpack-plugin --save-dev
Read Before Moving On!
- Do not put anything between
<!--% scripts %--><!--% scripts %-->
comment tags. They will be erased!!
Configuration
Step 1: Import/Require Plugin into Webpack config file
webpack.config.js
const VisualforcePlugin =
% scripts %
for your js files and % styles %
for your css files
Spacing does not matter
<!--%scripts%-->
, <!--% scripts %-->
, or <!-- % scripts % -->
App.page
<!--% styles %--> <!-- WARNING: Do NOT Put anything [HERE]. Will get erased --> <!--% styles %--> ... <!--% scripts %--> <!-- WARNING: Do NOT Put anything [HERE]. Will get erased --> <!--% scripts %-->
Step 3: Add a new instance of the Imported/Required Plugin configuration
webpack.config.js
//From Step 1const VisualforcePlugin = moduleexports = entry: './index.js' output: filname: '[name].bundle.js' path: "./force-app/main/default/staticresources/dist" plugins: // Add a new instance here page: './force-app/default/main/pages/App.page'
Options
{Object}
or {Array}
of objects w/ the following data structure
Plugin accepts 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 |
Additional Option Info
You can filter out entrypoint assets you wish to not include in the page.
webpack.config.js
modulesexports = entry: app: './app.js' main: './main.js' mobile: './mobile.js' output: filename: '[name].bundle.js' path: path plugins: entry: 'app' 'main' // mobile entry is not included page: path
Script Function Hooks Details
Script Tag Attribute Defaults
Name | Default |
---|---|
type |
text/javascript |
src |
[Depends on output in static resource] |
async |
false |
defer |
false |
nomodule |
false |
Example: <script type="text/javascript" src="[]" />
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:
{ const resourceName resourceFilePath = scriptData; // ... return src: `/` }
examples of using the options
entry: 'app' page: path { // ... return src: `{!URLFOR($Resource., '')}` type: 'text/javascript' }
entry: 'app' page: path { return rel: 'stylesheet' href: `` type: '' ; }
Example(s)
webpack.config.js
const path = const VisualforcePlugin = moduleexports = entry: app: './index.js' output: filename: 'bundle.js' path: path plugins: entry: 'app' page: './force-app/default/main/pages/App.page'
Before:
App.page
... ... <!--% scripts %--> <!--% scripts %-->
After:
App.page
... ... <!--% scripts %--> <!--% scripts %-->
Bundle Splitting
if your entry point has code/bundle splitting then your page might result in
... <!--% scripts %--> <!--% scripts %-->
Updating Multiple Visualforce File(s)
example of updating more than one visualforce page w/ multiple entries
webpack.config.js
const path = const VisualforcePlugin = moduleexports = entry: app: './app.js' admin: '/admin.js' mobile: './admin.js' output: filename: '[name].bundle.js' path: path plugins: entry: 'app' page: path entry: 'admin' page: path entry: 'mobile' page: path
force-app/main/default/staticresources/
directory. (Not recommended)
Outputting File(s) directly nested w/ in If your output combination of your path and filename is only one level deep w/ in staticresources then your file name(s) need to change from any characters such as .
to underscrores _
since salesforce doesn't allow non alphanumeric characters in the file name
W/ this config change the following
output: filename: '[name].bundle.js' path: path
to
output: filename: '[name]_bundle.js' path: path
or
output: filename: '[name]_bundle.resource' path: path
If your splitting chunks as well you'll want to do the following in your optimization
optimization: splitChunks: chunks: 'all' { const moduleFileName = module; const allChunksNames = chunks; return `_`; }
for example if your using react, react-dom split bundle might result in vendors_reactdom_bundle.js
;
Ngrok/Development Hook Example
Handy if you want to implement a dev config w/ live updating w/ out refreshing the visualforce page
entry: 'main' page: './force-app/main/default/pages/App.page' { const resourceName resourceFilePath = scriptData; return src: `https://mjyocca.ngrok.io//` }))
Output App.page
<!--% scripts %--><!--% scripts %-->
vs
<!--% scripts %--><!--% scripts %-->