https://github.com/mjyocca/visualforce-template-webpack-plugin
Webpack plugin that simplifies the updating of Visualforce template files to serve your webpack bundles
https://github.com/mjyocca/visualforce-template-webpack-plugin
salesforce salesforce-developers sfdx visualforce webpack webpack-plugin
Last synced: about 2 months ago
JSON representation
Webpack plugin that simplifies the updating of Visualforce template files to serve your webpack bundles
- Host: GitHub
- URL: https://github.com/mjyocca/visualforce-template-webpack-plugin
- Owner: mjyocca
- License: mit
- Created: 2020-01-17T02:11:40.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T08:40:55.000Z (about 3 years ago)
- Last Synced: 2025-09-09T01:27:38.311Z (6 months ago)
- Topics: salesforce, salesforce-developers, sfdx, visualforce, webpack, webpack-plugin
- Language: JavaScript
- Homepage:
- Size: 348 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/visualforce-template-webpack-plugin)
[](https://www.npmjs.com/package/visualforce-template-webpack-plugin)
[](https://github.com/mjyocca/visualforce-template-webpack-plugin)
# Visualforce Template Webpack Plugin
This is a [Webpack](https://webpack.js.org/) plugin that simplifies the updating of your [Visualforce](https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_intro_what_is_it.htm) 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](https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_resources_reference.htm).*
#### Before Webpack Compilation:
**`App.page`**
```html
...
...
```
#### After Webpack Compilation:
**`App.page`**
```html
...
...
```
# Install
```bash
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**
```html
...
//put non webpack/global javascript here
```
Step 2: Import/Require Plugin into Webpack config file
**webpack.config.js**
```js
const VisualforcePlugin = require('visualforce-template-webpack-plugin')
```
Step 3: Add a new instance of the Imported/Required Plugin configuration
**webpack.config.js**
```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**
```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**
```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`**
```html
```
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:
```js
scriptHook: (scriptData) => {
const { resourceName, resourceFilePath } = scriptData;
// ...
return {
src: `${resourceName}/${resourceFilePath}`
}
}
```
#### examples of using the options
```js
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:
```js
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](https://github.com/mjyocca/visualforce-template-webpack-plugin/tree/master/examples)
**webpack.config.js**
```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**
```html
...
...
```
#### After:
**App.page**
```html
...
...
```
---
## Updating Multiple Visualforce File(s)
example of updating more than one visualforce page/component w/ multiple entries
***webpack.config.js***
```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")
}])
]
}
```