diff --git a/README.md b/README.md index 22f0c57..067d298 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,127 @@ -# ejs-compiled-loader for webpack +# ejs-webpack-loader for webpack 4.x EJS loader for [webpack](http://webpack.github.io/). Uses [ejs](https://github.com/mde/ejs) function to compile templates. -To use [EJS by tj](https://github.com/tj/ejs) use 1.x branch and 1.x.x versions. - ## Installation -`npm install ejs-compiled-loader` +`npm install ejs-webpack-loader` + +## Config Setup examples as module loader + +ejs example +```ejs + + + + + <%= title %> + + +

<%= someVar %>

+ + +``` + +webpack.config.js + +``` javascript + +const path = require('path'); + +const config = { + output: { + filename: 'my-first-webpack.bundle.js' + }, + module: { + rules: [ + { + test: /\.ejs$/, + use: [ + { + loader: "ejs-webpack-loader", + options: { + data: {title: "New Title", someVar:"hello world"}, + htmlmin: true + } + } + ] + } + ] + } +}; + +``` + +## Config Setup examples with separate extractor + +``` javascript + +const path = require('path'); + +const config = { + entry: [ + './src/index.ejs', + './src/main.ejs', + ] + output: { + filename: 'my-first-webpack.bundle.js' + }, + module: { + rules: [ + { + test: /\.ejs$/, + use: [ + { + loader: 'file-loader', + options: { + name: '[name].html', + context: './src/', + outputPath: '/' + } + }, + { + loader: 'extract-loader' + }, + { + loader: "ejs-webpack-loader", + { + data: {title: "New Title", someVar:"hello world"}, + htmlmin: true + } + } + ] + } + ] + } +}; + +``` + +## Config Setup examples (via HtmlWebpackPlugin) + +``` javascript -## Usage +const path = require('path'); + +const config = { + output: { + filename: 'my-first-webpack.bundle.js' + }, + module: { + ... + }, + plugin: { + new HtmlWebpackPlugin({ + template: '!!ejs-webpack-loader!src/index.ejs' + }) + } +}; + +module.exports = config; + +``` + +## EJS Example [Documentation: Using loaders](http://webpack.github.io/docs/using-loaders.html) @@ -38,15 +151,19 @@ Following options can be specified in query: ```javascript module: { - loaders: [ - {test: /\.ejs$/, loader: 'ejs-compiled?htmlmin'} // enable here - ] -}, -'ejs-compiled-loader': { - 'htmlmin': true, // or enable here - 'htmlminOptions': { - removeComments: true - } + rules: [ + { + test: /\.ejs$/, + use: [ + { + loader: "ejs-webpack-loader", + options: { + htmlmin: true + } + } + ] + } + ] } ``` diff --git a/index.js b/index.js index 416414c..9ec1dbb 100644 --- a/index.js +++ b/index.js @@ -6,12 +6,16 @@ var ejs = require('ejs'), merge = require('merge'); -module.exports = function (source) { +module.exports = function(source) { this.cacheable && this.cacheable(); - var query = typeof this.query === 'object' ? this.query : utils.parseQuery(this.query); - var opts = merge(this.options['ejs-compiled-loader'] || {}, query); - opts.client = true; + var _options = typeof this.options === 'object' ? this.options['ejs-compiled-loader'] || {} : {}; + _options = typeof utils.getOptions === 'function' ? merge(utils.getOptions(this), _options) : _options; + var opts = merge(_options, query); + + if (opts.client == undefined) { + opts.client = true; + } // Skip compile debug for production when running with // webpack --optimize-minimize @@ -27,13 +31,17 @@ module.exports = function (source) { } var template = ejs.compile(source, opts); + template.dependencies.forEach(this.dependency.bind(this)); // Beautify javascript code - if (!this.minimize && opts.beautify !== false) { - var ast = UglifyJS.parse(template.toString()); - ast.figure_out_scope(); - template = ast.print_to_string({beautify: true}); + if (this.loaders.length > 1) { + template = JSON.stringify(template((opts['data'] || {}))); + } else { + if (!this.minimize && opts.beautify !== false) { + var ast = UglifyJS.parse(template.toString()); + ast.figure_out_scope(); + template = ast.print_to_string({beautify: true}); + } } - return 'module.exports = ' + template; }; diff --git a/package.json b/package.json index 1e6e348..baf6b2f 100644 --- a/package.json +++ b/package.json @@ -1,14 +1,14 @@ { - "name": "ejs-compiled-loader", - "version": "2.2.0", - "description": "EJS webpack loader (without frontend dependencies)", + "name": "ejs-webpack-loader", + "version": "2.2.2", + "description": "EJS webpack 4.x loader (without frontend dependencies)", "main": "index.js", "scripts": { "test": "cd test && ../node_modules/.bin/webpack && node bundle.js" }, "repository": { "type": "git", - "url": "https://github.com/bazilio91/ejs-compiled-loader.git" + "url": "https://github.com/rorkflash/ejs-webpack-loader" }, "keywords": [ "ejs", @@ -16,21 +16,23 @@ "loader", "template" ], - "author": "Vasily Ostanin ", + "author": "Ashot Gasparyan ", "license": "MIT", "bugs": { - "url": "https://github.com/bazilio91/ejs-compiled-loader/issues" + "url": "https://github.com/rorkflash/ejs-webpack-loader/issues" }, - "homepage": "https://github.com/bazilio91/ejs-compiled-loader", + "homepage": "https://github.com/rorkflash/ejs-webpack-loader", "dependencies": { - "ejs": "^2.0.0", "html-minifier": "^3", "loader-utils": "^0.2.7", - "merge": "^1.2.0", + "merge": "^2.1.1", "uglify-js": "~2.6.1" }, "devDependencies": { "node-libs-browser": "^0.5.0", - "webpack": "^1.9.4" + "webpack": "^4.5.0" + }, + "peerDependencies": { + "ejs": "^2.0.0" } }