diff --git a/README.md b/README.md index 7787cb8..ab82ad4 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,8 @@ Webpack configuration that creates a sfmc compatible script. * array functions (map, reduce, forEach) * Object functions (keys) * modern JS syntax -* ampScript loader +* ampScriptLoader +* htmlLoader * minification (optionally) ## Installation `git clone https://github.com/adessoSE/ssjs-webpack.git` @@ -51,6 +52,27 @@ in `/src/index.js`: ``` import ampFile from './lib/foo.amp' Write(ampFile.run()); +``` +### htmlLoader +external html files can be imported and displayed. +> **_NOTE:_** do not overwrite the `/templates/index.ejs`. It is required to build the SFMC compatible script. +Example: +create a new file `/templates/index.html`: +``` + + + Hello World! + + +

Hello World!

+ + +``` +in `/src/index.js`: +``` +import index from 'templates/index.html'; +index.display(); + ``` ### minification By default minification is disabled. To enable it, go to `\webpack.config.js` and set diff --git a/loaders/htmlLoader.js b/loaders/htmlLoader.js new file mode 100644 index 0000000..930f6dd --- /dev/null +++ b/loaders/htmlLoader.js @@ -0,0 +1,8 @@ +module.exports = (input) => { + return `export default({ + display: function(){Write(TreatAsContent('${input.replace(/\>[\r\n ]+\<") + .replace(/(<.*?>)|\s+/g, (m, $1) => $1 ? $1 : ' ') + .replace(/'/gi, "\\'") + .trim()}'))} + })`; +}; \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 08afdb9..baf5838 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -25,6 +25,16 @@ module.exports = { target: ["web", "es3"], module: { rules: [ + { + test: /\.(html)$/, + exclude: /node_modules/, + use: [ + { + loader: "./loaders/htmlLoader.js", + options: {}, + }, + ], + }, { test: /\.(js)$/, exclude: /node_modules/, @@ -58,6 +68,7 @@ module.exports = { alias: { polyfills: path.resolve(__dirname, "polyfills/"), lib: path.resolve(__dirname, "lib/"), + templates: path.resolve(__dirname, "templates/") }, }, };