diff --git a/README.md b/README.md index 4ca7136..bb518e0 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ The plugin writes CSS and JS asset paths for you automatically. Works with webpa ## Usage -``` +```sh npm install mini-html-webpack-plugin ``` @@ -18,11 +18,19 @@ const MiniHtmlWebpackPlugin = require('mini-html-webpack-plugin'); const config = { plugins: [ new MiniHtmlWebpackPlugin({ + // Optional, defaults to `index.html` + filename: 'demo.html', + // Optional + publicPath: 'demo/', context: { title: 'Webpack demo', - htmlAttributes: { lang: 'en' } // Optional, defaults to { lang: 'en' } - }, - filename: 'demo.html' // Optional, defaults to `index.html` + // Optional, defaults to `{ lang: 'en' }` + htmlAttributes: { lang: 'en' }, + // Optional + cssAttributes: { rel: 'preload' }, + // Optional + jsAttributes: { defer: 'defer' } + } }) ] }; @@ -56,6 +64,7 @@ Or define a template function to generate your own code: ```js const MiniHtmlWebpackPlugin = require('mini-html-webpack-plugin'); const { + generateAttributes, generateCSSReferences, generateJSReferences } = MiniHtmlWebpackPlugin; @@ -63,24 +72,50 @@ const { const config = { plugins: [ new MiniHtmlWebpackPlugin({ + filename: 'demo.html', + publicPath: 'demo/', + // `context` is available in `template` below context: { - title: 'Custom template' // Available in the context below + title: 'Webpack demo', + htmlAttributes: { lang: 'en' }, + cssAttributes: { rel: 'preload' }, + jsAttributes: { defer: 'defer' } }, - template: ({ css, js, title, htmlAttributes, publicPath }) => - ` - `${attribute[0]}="${attribute[1]}"`) - .join(' ')}> - - - ${title} - ${generateCSSReferences(css, publicPath)} - - -
- ${generateJSReferences(js, publicPath)} - - ` + template: ({ + css, + js, + publicPath, + title, + htmlAttributes, + cssAttributes, + jsAttributes + }) => { + const htmlAttrs = generateAttributes(htmlAttributes); + + const cssTags = generateCSSReferences({ + files: css, + attributes: cssAttributes, + publicPath + }); + + const jsTags = generateJSReferences({ + files: js, + attributes: jsAttributes, + publicPath + }); + + return ` + + + + ${title} + ${cssTags} + + + ${jsTags} + + `; + } }) ] }; diff --git a/__snapshots__/test.js.snap b/__snapshots__/test.js.snap index e9e0e2e..5b19448 100644 --- a/__snapshots__/test.js.snap +++ b/__snapshots__/test.js.snap @@ -6,7 +6,6 @@ exports[`custom filename 1`] = ` - @@ -15,13 +14,26 @@ exports[`custom filename 1`] = ` " `; +exports[`custom js attribute 1`] = ` +" + + + + + + + + + + " +`; + exports[`custom lang 1`] = ` " - @@ -30,6 +42,20 @@ exports[`custom lang 1`] = ` " `; +exports[`custom publicPath 1`] = ` +" + + + + + + + + + + " +`; + exports[`custom template 1`] = `"
Pizza
"`; exports[`custom title 1`] = ` @@ -38,7 +64,6 @@ exports[`custom title 1`] = ` Pizza - @@ -53,7 +78,6 @@ exports[`default options 1`] = ` - diff --git a/index.js b/index.js index bc322be..0236109 100644 --- a/index.js +++ b/index.js @@ -8,15 +8,19 @@ class MiniHtmlWebpackPlugin { } plugin(compilation, callback) { - const { publicPath } = compilation.options.output; - const { filename = 'index.html', template, context } = this.options; + const { + filename = 'index.html', + publicPath = '', + template, + context, + } = this.options; const files = getFiles(normalizeEntrypoints(compilation.entrypoints)); + const options = Object.assign({}, { publicPath }, context, files); + compilation.assets[filename] = new RawSource( - (template || defaultTemplate)( - Object.assign({}, { publicPath }, context, files) - ) + (template || defaultTemplate)(options) ); callback(); @@ -64,39 +68,82 @@ function normalizeEntrypoints(entrypoints) { function defaultTemplate({ css, js, + publicPath = '', title = '', - htmlAttributes = { lang: 'en' }, - publicPath, + htmlAttributes = { + lang: 'en', + }, + cssAttributes = {}, + jsAttributes = {}, }) { + const htmlAttrs = generateAttributes(htmlAttributes); + + const cssTags = generateCSSReferences({ + files: css, + attributes: cssAttributes, + publicPath, + }); + + const jsTags = generateJSReferences({ + files: js, + attributes: jsAttributes, + publicPath, + }); + return ` - `${attribute[0]}="${attribute[1]}"`) - .join(' ')}> + ${title} - - ${generateCSSReferences(css, publicPath)} + ${cssTags} - ${generateJSReferences(js, publicPath)} + ${jsTags} `; } -function generateCSSReferences(files = [], publicPath = '') { +function generateCSSReferences({ + files = [], + publicPath = '', + attributes = {}, +}) { + attributes = generateAttributes(attributes); + return files - .map(file => ``) + .map( + file => `` + ) .join(''); } -function generateJSReferences(files = [], publicPath = '') { +function generateJSReferences({ + files = [], + publicPath = '', + attributes = {}, +}) { + attributes = generateAttributes(attributes); + return files - .map(file => ``) + .map(file => ``) .join(''); } +function generateAttributes(attributes = {}) { + attributes = Object.entries(attributes); + + if (attributes.length === 0) { + return ''; + } + + return ( + ' ' + + attributes.map(attribute => `${attribute[0]}="${attribute[1]}"`).join(' ') + ); +} + module.exports = MiniHtmlWebpackPlugin; module.exports.defaultTemplate = defaultTemplate; +module.exports.generateAttributes = generateAttributes; module.exports.generateCSSReferences = generateCSSReferences; module.exports.generateJSReferences = generateJSReferences; diff --git a/package-lock.json b/package-lock.json index d7d6bd5..e470cc5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2732,7 +2732,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -2753,12 +2754,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2773,17 +2776,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -2900,7 +2906,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -2912,6 +2919,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2926,6 +2934,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -2933,12 +2942,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -2957,6 +2968,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -3037,7 +3049,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -3049,6 +3062,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -3134,7 +3148,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -3170,6 +3185,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -3189,6 +3205,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -3232,12 +3249,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, diff --git a/test.js b/test.js index cdd442f..414db4a 100644 --- a/test.js +++ b/test.js @@ -33,6 +33,15 @@ test('custom lang', () => { }); }); +test('custom js attribute', () => { + return compiler( + {}, + getConfig({ context: { jsAttributes: { defer: 'defer' } } }) + ).then(result => { + expect(result.compilation.assets['index.html']._value).toMatchSnapshot(); + }); +}); + test('custom template', () => { return compiler( {}, @@ -52,10 +61,8 @@ test('custom filename', () => { }); }); -// TODO: https://github.com/webpack-contrib/test-utils/issues/2 -/* test('custom publicPath', () => { - const publicPath = '/pizza/'; - return compiler({}, getConfig({}, { output: { publicPath } })).then(result => { +test('custom publicPath', () => { + return compiler({}, getConfig({ publicPath: 'pizza/' })).then(result => { expect(result.compilation.assets['index.html']._value).toMatchSnapshot(); }); -}); */ +});