├── spec
    ├── fixtures
    │   ├── simplescript2.js
    │   ├── simplescript1.js
    │   ├── stylesheet.css
    │   ├── chunk1.js
    │   ├── chunk2.js
    │   ├── chunk3.js
    │   ├── script1.js
    │   ├── script2.js
    │   ├── script3.js
    │   ├── index1.js
    │   ├── index2.js
    │   ├── index3.js
    │   ├── script1_with_style.js
    │   ├── async_script.js
    │   └── handlebars_template.hbs
    ├── support
    │   └── jasmine.json
    ├── helpers
    │   ├── core-test.js
    │   ├── jasmineSetup.js
    │   ├── versions.js
    │   └── compilation-test.js
    ├── config-spec.js
    ├── async-spec.js
    └── core-spec.js
├── .gitignore
├── index.js
├── dynavers.json
├── lib
    ├── constants.js
    ├── resource-hints.js
    ├── initial-chunk-resource-hints.js
    ├── custom-attributes.js
    ├── async-chunk-resource-hints.js
    ├── common.js
    ├── elements.js
    ├── config.js
    └── plugin.js
├── .travis.yml
├── LICENSE
├── package.json
└── README.md


/spec/fixtures/simplescript2.js:
--------------------------------------------------------------------------------
1 | Date.now();
2 | 


--------------------------------------------------------------------------------
/spec/fixtures/simplescript1.js:
--------------------------------------------------------------------------------
1 | console.log('it works!');
2 | 


--------------------------------------------------------------------------------
/spec/fixtures/stylesheet.css:
--------------------------------------------------------------------------------
1 | body {
2 |   background: snow;
3 | }


--------------------------------------------------------------------------------
/spec/fixtures/chunk1.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | module.exports = 'chunk1';
4 | 


--------------------------------------------------------------------------------
/spec/fixtures/chunk2.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | module.exports = 'chunk2';
4 | 


--------------------------------------------------------------------------------
/spec/fixtures/chunk3.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | module.exports = 'chunk3';
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | /node_modules/
2 | /dynavers_modules/
3 | /dist/
4 | npm-debug.log
5 | .idea
6 | 


--------------------------------------------------------------------------------
/spec/fixtures/script1.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | require('./chunk1.js');
4 | require('./index1.js');
5 | 


--------------------------------------------------------------------------------
/spec/fixtures/script2.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | require('./chunk2.js');
4 | require('./index2.js');
5 | 


--------------------------------------------------------------------------------
/spec/fixtures/script3.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | require('./chunk3.js');
4 | require('./index3.js');
5 | 


--------------------------------------------------------------------------------
/spec/fixtures/index1.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | document.body.innerHTML = document.body.innerHTML + '<p>index1.js</p>';
4 | 


--------------------------------------------------------------------------------
/spec/fixtures/index2.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | document.body.innerHTML = document.body.innerHTML + '<p>index2.js</p>';
4 | 


--------------------------------------------------------------------------------
/spec/fixtures/index3.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | document.body.innerHTML = document.body.innerHTML + '<p>index3.js</p>';
4 | 


--------------------------------------------------------------------------------
/spec/fixtures/script1_with_style.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | require('./stylesheet.css');
4 | require('./chunk1.js');
5 | require('./index1.js');
6 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | const ScriptExtHtmlWebpackPlugin = require('./lib/plugin.js');
4 | 
5 | module.exports = ScriptExtHtmlWebpackPlugin;
6 | 


--------------------------------------------------------------------------------
/dynavers.json:
--------------------------------------------------------------------------------
1 | {
2 |   "path": "dynavers_modules",
3 |   "versions": {
4 |     "webpack" : ["1.14.0", "2.7.0","3.12.0", "4.44.2"],
5 |     "html-webpack-plugin" : ["3.2.0", "4.5.0"]
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/lib/constants.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const PLUGIN = 'ScriptExtHtmlWebpackPlugin';
 4 | const EVENT = 'html-webpack-plugin-alter-asset-tags';
 5 | 
 6 | module.exports = {
 7 |   PLUGIN,
 8 |   EVENT
 9 | };
10 | 


--------------------------------------------------------------------------------
/spec/fixtures/async_script.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | require('./chunk1.js');
4 | require('./index1.js');
5 | 
6 | require.ensure(['./chunk2.js'], () => {}, 'dynamic2');
7 | require.ensure(['./chunk3.js'], () => {}, 'dynamic3');
8 | 


--------------------------------------------------------------------------------
/spec/support/jasmine.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "spec_dir": "spec",
 3 |   "spec_files": [
 4 |     "**/*[sS]pec.js"
 5 |   ],
 6 |   "helpers": [
 7 |     "helpers/**/*.js"
 8 |   ],
 9 |   "stopSpecOnExpectationFailure": false,
10 |   "random": false
11 | }
12 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | language: node_js
 2 | node_js:
 3 |   - "11"
 4 |   - "10"
 5 |   - "9"
 6 |   - "8"
 7 |   - "7"
 8 |   - "6"
 9 | env:
10 |   - CXX=g++-4.8
11 | addons:
12 |   apt:
13 |     sources:
14 |       - ubuntu-toolchain-r-test
15 |     packages:
16 |       - g++-4.8
17 | 
18 | 


--------------------------------------------------------------------------------
/spec/helpers/core-test.js:
--------------------------------------------------------------------------------
 1 | /* eslint-env jasmine */
 2 | 'use strict';
 3 | 
 4 | const compilationTest = require('./compilation-test.js');
 5 | 
 6 | module.exports = (config, expected, done) => {
 7 |   const webpack = require('webpack');
 8 |   webpack(config, (err, stats) => {
 9 |     compilationTest(err, stats, expected, done);
10 |   });
11 | };
12 | 


--------------------------------------------------------------------------------
/spec/helpers/jasmineSetup.js:
--------------------------------------------------------------------------------
 1 | /* eslint-env jasmine */
 2 | 'use strict';
 3 | 
 4 | // for debugging
 5 | if (process.env.DEBUG) {
 6 |   jasmine.DEFAULT_TIMEOUT_INTERVAL = 600000;
 7 | }
 8 | 
 9 | require('jasmine2-custom-message');
10 | const SpecReporter = require('jasmine-spec-reporter').SpecReporter;
11 | jasmine.getEnv().addReporter(new SpecReporter());
12 | 


--------------------------------------------------------------------------------
/spec/fixtures/handlebars_template.hbs:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 | <meta charset="utf-8">
 5 | <meta http-equiv="x-ua-compatible" content="ie=edge">
 6 | <meta name="viewport" content="width=device-width, initial-scale=1">
 7 | 
 8 | <body>
 9 | 
10 | <script>console.log('
11 |   {{#if htmlWebpackPlugin.options.testMsg}}
12 |   {{htmlWebpackPlugin.options.testMsg}}
13 |   {{else}}
14 |   Missing Test Message
15 |   {{/if}}
16 |   ');
17 | </script>
18 | 
19 | </body>
20 | </html>
21 | 
22 | 


--------------------------------------------------------------------------------
/lib/resource-hints.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const shouldAddResourceHints = options => {
 4 |   return !(options.prefetch.test.length === 0 &&
 5 |            options.preload.test.length === 0);
 6 | };
 7 | 
 8 | const createResourceHint = (rel, href) => {
 9 |   return {
10 |     tagName: 'link',
11 |     selfClosingTag: true,
12 |     attributes: {
13 |       rel: rel,
14 |       href: href,
15 |       as: 'script'
16 |     }
17 |   };
18 | };
19 | 
20 | module.exports = {
21 |   shouldAddResourceHints,
22 |   createResourceHint
23 | };
24 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 numical
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/lib/initial-chunk-resource-hints.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const CHUNK_OPTIONS = ['all', 'initial'];
 4 | 
 5 | const createResourceHint = require('./resource-hints.js').createResourceHint;
 6 | const common = require('./common.js');
 7 | const matches = common.matches;
 8 | const getScriptName = common.getScriptName;
 9 | const getRawScriptName = common.getRawScriptName;
10 | const hasScriptName = common.hasScriptName;
11 | 
12 | const optionsMatch = (option, scriptName) => {
13 |   return matches(option.chunks, CHUNK_OPTIONS) && matches(scriptName, option.test);
14 | };
15 | 
16 | const addInitialChunkResourceHints = (options, tags) => {
17 |   return tags
18 |     .filter(hasScriptName)
19 |     .reduce((hints, tag) => {
20 |       const scriptName = getScriptName(options, tag);
21 |       if (optionsMatch(options.preload, scriptName)) {
22 |         hints.push(createResourceHint('preload', getRawScriptName(tag)));
23 |       } else if (optionsMatch(options.prefetch, scriptName)) {
24 |         hints.push(createResourceHint('prefetch', getRawScriptName(tag)));
25 |       }
26 |       return hints;
27 |     },
28 |     []
29 |     );
30 | };
31 | 
32 | module.exports = addInitialChunkResourceHints;
33 | 


--------------------------------------------------------------------------------
/lib/custom-attributes.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const CONSTANTS = require('./constants.js');
 4 | 
 5 | const common = require('./common.js');
 6 | const debug = common.debug;
 7 | const getScriptName = common.getScriptName;
 8 | const isResourceLink = common.isResourceLink;
 9 | const isScript = common.isScript;
10 | const matches = common.matches;
11 | 
12 | const shouldAdd = options => {
13 |   return options.custom.length > 0;
14 | };
15 | 
16 | const add = (options, tags) => {
17 |   const update = updateElement.bind(null, options);
18 |   return tags.map(update);
19 | };
20 | 
21 | const updateElement = (options, tag) => {
22 |   return (isScript(tag) || isResourceLink(tag))
23 |     ? updateScriptElement(options, tag)
24 |     : tag;
25 | };
26 | 
27 | const updateScriptElement = (options, tag) => {
28 |   const scriptName = getScriptName(options, tag);
29 |   let updated = false;
30 |   options.custom.forEach(customOption => {
31 |     if (matches(scriptName, customOption.test)) {
32 |       tag.attributes = tag.attributes || {};
33 |       tag.attributes[customOption.attribute] = customOption.value;
34 |       updated = true;
35 |     }
36 |   });
37 |   if (updated) {
38 |     debug(`${CONSTANTS.PLUGIN}: updated to: ${JSON.stringify(tag)}`);
39 |   }
40 |   return tag;
41 | };
42 | 
43 | module.exports = {
44 |   shouldAdd,
45 |   add
46 | };
47 | 


--------------------------------------------------------------------------------
/spec/helpers/versions.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const setModuleVersion = require('dynavers')('dynavers.json');
 4 | 
 5 | const VERSIONS = {
 6 |   webpack1: {
 7 |     major: 1,
 8 |     minor: 14,
 9 |     patch: 0,
10 |     display: '1.14.0'
11 |   },
12 |   webpack2: {
13 |     major: 2,
14 |     minor: 7,
15 |     patch: 0,
16 |     display: '2.7.0'
17 |   },
18 |   webpack3: {
19 |     major: 3,
20 |     minor: 12,
21 |     patch: 0,
22 |     display: '3.12.0'
23 |   },
24 |   webpack4: {
25 |     major: 4,
26 |     minor: 44,
27 |     patch: 2,
28 |     display: '4.44.2'
29 |   }
30 | };
31 | 
32 | const HWP_VERSION = {
33 |   hwp3: {
34 |     major: 3,
35 |     minor: 2,
36 |     patch: 0,
37 |     display: '3.2.0'
38 |   },
39 |   hwp4: {
40 |     major: 4,
41 |     minor: 5,
42 |     patch: 0,
43 |     display: '4.5.0'
44 |   }
45 | };
46 | 
47 | const selected = VERSIONS[process.env.VERSION];
48 | if (selected) {
49 |   setModuleVersion('webpack', selected.display, true);
50 | } else {
51 |   throw new Error(`Unknown webpack version '${process.env.VERSION}'`);
52 | }
53 | 
54 | const selectedForHwp = HWP_VERSION[process.env.HWP_VERSION];
55 | if (selectedForHwp) {
56 |   setModuleVersion('html-webpack-plugin', selectedForHwp.display, true);
57 | } else {
58 |   throw new Error(`Unknown html-webpack-plugin version '${process.env.HWP_VERSION}'`);
59 | }
60 | 
61 | selected['html-webpack-plugin'] = selectedForHwp;
62 | 
63 | module.exports = selected;
64 | 


--------------------------------------------------------------------------------
/lib/async-chunk-resource-hints.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const CHUNK_OPTIONS = ['all', 'async'];
 4 | 
 5 | const getPublicPath = require('./common.js').getPublicPath;
 6 | const createResourceHint = require('./resource-hints.js').createResourceHint;
 7 | const matches = require('./common.js').matches;
 8 | 
 9 | const addAsyncChunkResourceHints = (chunks, options) => {
10 |   const getRef = generateRef(options);
11 |   const hints = [];
12 |   chunks
13 |     .filter(chunk => !isInitial(chunk))
14 |     .reduce(
15 |       (files, chunk) => files.concat(chunk.files),
16 |       [])
17 |     .forEach(file => {
18 |       if (optionsMatch(options.preload, file)) {
19 |         hints.push(createResourceHint('preload', getRef(file)));
20 |       } else if (optionsMatch(options.prefetch, file)) {
21 |         hints.push(createResourceHint('prefetch', getRef(file)));
22 |       }
23 |     });
24 |   return hints;
25 | };
26 | 
27 | const isInitial = chunk =>
28 |   chunk.canBeInitial
29 |     ? chunk.canBeInitial()
30 |     : chunk.isInitial
31 |       ? chunk.isInitial()
32 |       : chunk.isInitial;
33 | 
34 | const optionsMatch = (option, file) => {
35 |   return matches(option.chunks, CHUNK_OPTIONS) && matches(file, option.test);
36 | };
37 | 
38 | const generateRef = options => {
39 |   const publicPath = getPublicPath(options);
40 |   return publicPath
41 |     ? file => publicPath + file
42 |     : file => file;
43 | };
44 | 
45 | module.exports = addAsyncChunkResourceHints;
46 | 


--------------------------------------------------------------------------------
/lib/common.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const debug = require('debug')('ScriptExt');
 4 | const separator = '/';
 5 | 
 6 | const isScript = (tag) => tag.tagName === 'script';
 7 | 
 8 | const isResourceLink = (tag) => tag.tagName === 'link' && tag.attributes && tag.attributes.as === 'script';
 9 | 
10 | const hasScriptName = tag => {
11 |   if (isScript(tag)) {
12 |     return tag.attributes && tag.attributes.src;
13 |   } else if (isResourceLink(tag)) {
14 |     return tag.attributes && tag.attributes.href;
15 |   } else {
16 |     return false;
17 |   }
18 | };
19 | 
20 | const getRawScriptName = tag => {
21 |   if (isScript(tag)) {
22 |     return (tag.attributes && tag.attributes.src) || '';
23 |   } else if (isResourceLink(tag)) {
24 |     return (tag.attributes && tag.attributes.href) || '';
25 |   } else {
26 |     return '';
27 |   }
28 | };
29 | 
30 | const getPublicPath = options => {
31 |   const output = options.compilationOptions.output;
32 |   if (output) {
33 |     const publicPath = output.publicPath;
34 |     if (publicPath) {
35 |       return publicPath.endsWith(separator) ? publicPath : publicPath + separator;
36 |     }
37 |   }
38 | };
39 | 
40 | const getScriptName = (options, tag) => {
41 |   let scriptName = getRawScriptName(tag);
42 |   const publicPath = getPublicPath(options);
43 |   if (publicPath) {
44 |     scriptName = scriptName.replace(publicPath, '');
45 |   }
46 |   if (options.htmlWebpackOptions.hash) {
47 |     scriptName = scriptName.split('?', 1)[0];
48 |   }
49 |   return scriptName;
50 | };
51 | 
52 | const matches = (toMatch, matchers) => {
53 |   return matchers.some((matcher) => {
54 |     if (matcher instanceof RegExp) {
55 |       return matcher.test(toMatch);
56 |     } else {
57 |       return toMatch.includes(matcher);
58 |     }
59 |   });
60 | };
61 | 
62 | module.exports = {
63 |   debug,
64 |   getPublicPath,
65 |   getRawScriptName,
66 |   getScriptName,
67 |   hasScriptName,
68 |   isResourceLink,
69 |   isScript,
70 |   matches
71 | };
72 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "script-ext-html-webpack-plugin",
 3 |   "version": "2.1.5",
 4 |   "description": "Enhances html-webpack-plugin functionality with async and defer attributes for script elements",
 5 |   "main": "index.js",
 6 |   "files": [
 7 |     "index.js",
 8 |     "lib/"
 9 |   ],
10 |   "scripts": {
11 |     "pretest": "semistandard & install-module-versions dynavers.json",
12 |     "test": "npm run test:webpack1 && npm run test:webpack2 && npm run test:webpack3 && npm run test:webpack4 && npm run test:webpack4htmlPlugin4",
13 |     "test:webpack1": "cross-env VERSION=webpack1 HWP_VERSION=hwp3 jasmine",
14 |     "test:webpack2": "cross-env VERSION=webpack2 HWP_VERSION=hwp3 jasmine",
15 |     "test:webpack3": "cross-env VERSION=webpack3 HWP_VERSION=hwp3 jasmine",
16 |     "test:webpack4": "cross-env VERSION=webpack4 HWP_VERSION=hwp3 jasmine",
17 |     "test:webpack4htmlPlugin4": "cross-env VERSION=webpack4 HWP_VERSION=hwp4 jasmine",
18 |     "debug": "cross-env DEBUG=ScriptExt VERSION=webpack4 HWP_VERSION=hwp4 jasmine",
19 |     "node-debug": "cross-env DEBUG=ScriptExt VERSION=webpack4 HWP_VERSION=hwp4 node-debug jasmine"
20 |   },
21 |   "repository": {
22 |     "type": "git",
23 |     "url": "https://github.com/numical/script-ext-html-webpack-plugin.git"
24 |   },
25 |   "keywords": [
26 |     "webpack",
27 |     "plugin",
28 |     "html-webpack-plugin",
29 |     "async",
30 |     "defer",
31 |     "inline",
32 |     "script",
33 |     "module",
34 |     "resource hints",
35 |     "prefetch",
36 |     "preload",
37 |     "dynamic script",
38 |     "async script"
39 |   ],
40 |   "author": "Mike Evans <mike.evans@numical.com> (https://github.com/numical)",
41 |   "license": "MIT",
42 |   "css-loader": "^1.0.1",
43 |   "bugs": {
44 |     "url": "https://github.com/numical/script-ext-html-webpack-plugin/issues"
45 |   },
46 |   "homepage": "https://github.com/numical/script-ext-html-webpack-plugin",
47 |   "dependencies": {
48 |     "debug": "^4.2.0"
49 |   },
50 |   "devDependencies": {
51 |     "cross-env": "^7.0.2",
52 |     "dynavers": "^0.3.1",
53 |     "handlebars": "^4.7.6",
54 |     "handlebars-loader": "1.7.1",
55 |     "jasmine": "^3.6.2",
56 |     "jasmine-spec-reporter": "^6.0.0",
57 |     "jasmine2-custom-message": "^0.9.3",
58 |     "rimraf": "^3.0.2",
59 |     "semistandard": "^14.2.3",
60 |     "uglifyjs-webpack-plugin": "^2.2.0",
61 |     "webpack-config": "7.5.0"
62 |   },
63 |   "peerDependencies": {
64 |     "webpack": "^1.0.0 || ^2.0.0 || ^3.0.0 || ^4.0.0",
65 |     "html-webpack-plugin": "^3.0.0 || ^4.0.0"
66 |   },
67 |   "engines": {
68 |     "node": ">=6.11.5"
69 |   }
70 | }
71 | 


--------------------------------------------------------------------------------
/lib/elements.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const CONSTANTS = require('./constants.js');
 4 | const SYNC = 'sync';
 5 | const ATTRIBUTE_PRIORITIES = [SYNC, 'async', 'defer'];
 6 | 
 7 | const common = require('./common.js');
 8 | const debug = common.debug;
 9 | const isScript = common.isScript;
10 | const matches = common.matches;
11 | const getScriptName = common.getScriptName;
12 | 
13 | const shouldUpdate = (options) => {
14 |   if (ATTRIBUTE_PRIORITIES.indexOf(options.defaultAttribute) < 0) {
15 |     throw new Error(`${CONSTANTS.PLUGIN}: invalid default attribute`);
16 |   }
17 |   return !(options.defaultAttribute === SYNC &&
18 |            options.inline.test.length === 0 &&
19 |            options.async.test.length === 0 &&
20 |            options.defer.test.length === 0 &&
21 |            options.module.test.length === 0);
22 | };
23 | 
24 | const update = (assets, options, tags) => {
25 |   const update = updateElement.bind(null, assets, options);
26 |   return tags.map(update);
27 | };
28 | 
29 | const updateElement = (assets, options, tag) => {
30 |   return (isScript(tag))
31 |     ? updateScriptElement(assets, options, tag)
32 |     : tag;
33 | };
34 | 
35 | const updateScriptElement = (assets, options, tag) => {
36 |   debug(`${CONSTANTS.EVENT}: processing <script> element: ${JSON.stringify(tag)}`);
37 |   return (isInline(options, tag))
38 |     ? replaceWithInlineElement(assets, options, tag)
39 |     : updateSrcElement(options, tag);
40 | };
41 | 
42 | const isInline = (options, tag) =>
43 |   matches(getScriptName(options, tag), options.inline.test);
44 | 
45 | const replaceWithInlineElement = (assets, options, tag) => {
46 |   const scriptName = getScriptName(options, tag);
47 |   const asset = assets[scriptName];
48 |   if (!asset) throw new Error(`${CONSTANTS.PLUGIN}: no asset with href '${scriptName}'`);
49 |   const newTag = {
50 |     tagName: 'script',
51 |     closeTag: true,
52 |     innerHTML: asset.source()
53 |   };
54 |   debug(`${CONSTANTS.PLUGIN}: replaced by: ${JSON.stringify(newTag)}`);
55 |   return newTag;
56 | };
57 | 
58 | const updateSrcElement = (options, tag) => {
59 |   const scriptName = getScriptName(options, tag);
60 |   // select new attribute, if any, by priority
61 |   let newAttribute;
62 |   ATTRIBUTE_PRIORITIES.some(attribute => {
63 |     if (matches(scriptName, options[attribute].test)) {
64 |       newAttribute = attribute;
65 |       return true;
66 |     }
67 |   });
68 |   if (!newAttribute) newAttribute = options.defaultAttribute;
69 |   if (newAttribute !== SYNC) {
70 |     tag.attributes[newAttribute] = true;
71 |   }
72 |   // possibly overwrite existing type attribute
73 |   if (matches(scriptName, options.module.test)) {
74 |     tag.attributes.type = 'module';
75 |   }
76 |   debug(`${CONSTANTS.PLUGIN}: updated to: ${JSON.stringify(tag)}`);
77 |   return tag;
78 | };
79 | 
80 | module.exports = {
81 |   shouldUpdate,
82 |   update
83 | };
84 | 


--------------------------------------------------------------------------------
/spec/helpers/compilation-test.js:
--------------------------------------------------------------------------------
 1 | /* eslint-env jasmine */
 2 | /* global since:false */
 3 | 'use strict';
 4 | 
 5 | const path = require('path');
 6 | const fs = require('fs');
 7 | const OUTPUT_DIR = path.join(__dirname, '../../dist');
 8 | 
 9 | module.exports = (err, stats, expected, done) => {
10 |   testError(err);
11 |   if (!err) {
12 |     testCompilation(stats.compilation.errors);
13 |     testCompilation(stats.compilation.warnings);
14 |     testFilesExistence(expected.files, true);
15 |     testFilesExistence(expected.not.files, false);
16 |     testFileContent('index.html', expected.html, true);
17 |     testFileContent('index.html', expected.not.html, false);
18 |     testFileContent('index_bundle.js', expected.js, true);
19 |     testFileContent('index_bundle.js', expected.not.js, false);
20 |   }
21 |   done();
22 | };
23 | 
24 | function testError (err) {
25 |   expect(err).toBeFalsy();
26 | }
27 | 
28 | function testCompilation (msgs) {
29 |   msgs = (msgs || []).join('\n');
30 |   expect(msgs).toBe('');
31 | }
32 | 
33 | function testFilesExistence (expectedFiles, expectedToExist) {
34 |   expectedFiles.forEach((filename) => {
35 |     testFileExistence(filename, expectedToExist);
36 |   });
37 | }
38 | 
39 | function testFileExistence (filename, expectedToExist) {
40 |   const fileExists = fs.existsSync(path.join(OUTPUT_DIR, filename));
41 |   const msg = expectedToExist
42 |     ? `file ${filename} should exist`
43 |     : `file ${filename} should not exist`;
44 |   since(msg).expect(fileExists).toBe(expectedToExist);
45 |   return fileExists;
46 | }
47 | 
48 | function testFileContent (filename, expectedContents, expectedToExist) {
49 |   if (expectedContents.length > 0) {
50 |     const content = getFileContent(filename);
51 |     since(`file ${filename} should have content`).expect(content).not.toBeNull();
52 |     expectedContents.forEach((expectedContent) => {
53 |       if (expectedToExist) {
54 |         const msg = `file ${filename} should include ${expectedContent}`;
55 |         testContentExists(content, expectedContent, msg);
56 |       } else {
57 |         const msg = `file ${filename} should not include ${expectedContent}`;
58 |         testContentDoesNotExist(content, expectedContent, msg);
59 |       }
60 |     });
61 |   }
62 | }
63 | 
64 | function getFileContent (filename) {
65 |   const fileExists = testFileExistence(filename, true);
66 |   return fileExists ? fs.readFileSync(path.join(OUTPUT_DIR, filename)).toString() : null;
67 | }
68 | 
69 | function testContentExists (content, expectedContent, msg) {
70 |   if (expectedContent instanceof RegExp) {
71 |     since(msg).expect(content).toMatch(expectedContent);
72 |   } else {
73 |     since(msg).expect(content).toContain(expectedContent);
74 |   }
75 | }
76 | 
77 | function testContentDoesNotExist (content, expectedContent, msg) {
78 |   if (expectedContent instanceof RegExp) {
79 |     since(msg).expect(content).not.toMatch(expectedContent);
80 |   } else {
81 |     since(msg).expect(content).not.toContain(expectedContent);
82 |   }
83 | }
84 | 


--------------------------------------------------------------------------------
/lib/config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const PLUGIN = require('./constants.js').PLUGIN;
  4 | 
  5 | const DEFAULT_HASH = {
  6 |   test: []
  7 | };
  8 | const DEFAULT_RESOURCE_HINT_HASH = {
  9 |   test: [],
 10 |   chunks: 'initial'
 11 | };
 12 | const DEFAULT_CUSTOM_HASH = {
 13 |   test: [],
 14 |   attribute: '',
 15 |   value: true
 16 | };
 17 | const DEFAULT_OPTIONS = {
 18 |   inline: DEFAULT_HASH,
 19 |   sync: DEFAULT_HASH,
 20 |   async: DEFAULT_HASH,
 21 |   defer: DEFAULT_HASH,
 22 |   module: DEFAULT_HASH,
 23 |   prefetch: DEFAULT_RESOURCE_HINT_HASH,
 24 |   preload: DEFAULT_RESOURCE_HINT_HASH,
 25 |   defaultAttribute: 'sync',
 26 |   removeInlinedAssets: true,
 27 |   custom: []
 28 | };
 29 | const POSSIBLE_VALUES = ['chunks', 'attribute', 'value'];
 30 | 
 31 | const normaliseOptions = options => {
 32 |   if (!options) return DEFAULT_OPTIONS;
 33 |   validate(options);
 34 |   const normalised = Object.assign({}, DEFAULT_OPTIONS, options);
 35 |   // now overwrite values which are not of DEFAULT_HASH form
 36 |   Object.keys(options).forEach(key => {
 37 |     const value = options[key];
 38 |     switch (key) {
 39 |       case 'inline':
 40 |       case 'sync':
 41 |       case 'async':
 42 |       case 'defer':
 43 |       case 'module':
 44 |         normalised[key] = normaliseAttribute(value);
 45 |         break;
 46 |       case 'prefetch':
 47 |       case 'preload':
 48 |         normalised[key] = normaliseResourceHint(value);
 49 |         break;
 50 |       case 'custom':
 51 |         normalised[key] = normaliseCustomArray(value);
 52 |         break;
 53 |       default:
 54 |         break;
 55 |     }
 56 |   });
 57 |   return normalised;
 58 | };
 59 | 
 60 | const validate = options => {
 61 |   const failureTests = []; // TODO!
 62 |   if (failureTests.some(test => test(options))) error();
 63 | };
 64 | 
 65 | const error = () => {
 66 |   throw new Error(`${PLUGIN}: invalid configuration - please see https://github.com/numical/script-ext-html-webpack-plugin#configuration`);
 67 | };
 68 | 
 69 | const normaliseValue = (defaultProps, value) => {
 70 |   const normalised = Object.assign({}, defaultProps);
 71 |   if (value) {
 72 |     normalised.test = convertToArray(value, () => {
 73 |       if (typeof value === 'object') {
 74 |         POSSIBLE_VALUES.forEach(key => copyValue(key, normalised, value));
 75 |         if (value.test) {
 76 |           return convertToArray(value.test, error);
 77 |         } else {
 78 |           error();
 79 |         }
 80 |       }
 81 |     });
 82 |   }
 83 |   return normalised;
 84 | };
 85 | 
 86 | const normaliseAttribute = normaliseValue.bind(null, DEFAULT_HASH);
 87 | 
 88 | const normaliseResourceHint = normaliseValue.bind(null, DEFAULT_RESOURCE_HINT_HASH);
 89 | 
 90 | const normaliseCustomAttribute = normaliseValue.bind(null, DEFAULT_CUSTOM_HASH);
 91 | 
 92 | const normaliseCustomArray = value => {
 93 |   const array = Array.isArray(value) ? value : [value];
 94 |   return array.map(normaliseCustomAttribute);
 95 | };
 96 | 
 97 | const convertToArray = (value, elseFn) => {
 98 |   if (typeof value === 'string') {
 99 |     return [value];
100 |   } else if (value instanceof RegExp) {
101 |     return [value];
102 |   } else if (Array.isArray(value)) {
103 |     return value;
104 |   } else {
105 |     return elseFn();
106 |   }
107 | };
108 | 
109 | const copyValue = (key, to, from) => {
110 |   if (Object.prototype.hasOwnProperty.call(from, key)) {
111 |     to[key] = from[key];
112 |   }
113 | };
114 | 
115 | module.exports = normaliseOptions;
116 | module.exports.DEFAULT_OPTIONS = DEFAULT_OPTIONS;
117 | 


--------------------------------------------------------------------------------
/lib/plugin.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const htmlWebpackPlugin = require('html-webpack-plugin');
  4 | 
  5 | const { EVENT, PLUGIN } = require('./constants.js');
  6 | 
  7 | const debug = require('./common.js').debug;
  8 | const matches = require('./common.js').matches;
  9 | const normaliseOptions = require('./config.js');
 10 | const shouldAddResourceHints = require('./resource-hints.js').shouldAddResourceHints;
 11 | const addInitialChunkResourceHints = require('./initial-chunk-resource-hints.js');
 12 | const addAsyncChunkResourceHints = require('./async-chunk-resource-hints.js');
 13 | const elements = require('./elements.js');
 14 | const customAttributes = require('./custom-attributes.js');
 15 | 
 16 | const debugEvent = msg => debug(`${EVENT}: ${msg}`);
 17 | 
 18 | const falsySafeConcat = arrays =>
 19 |   arrays.reduce(
 20 |     (combined, array) => array ? combined.concat(array) : combined,
 21 |     []
 22 |   );
 23 | 
 24 | const getHtmlWebpackOptions = pluginArgs =>
 25 |   (pluginArgs && pluginArgs.plugin && pluginArgs.plugin.options)
 26 |     ? pluginArgs.plugin.options
 27 |     : {};
 28 | 
 29 | const getCompilationOptions = compilation =>
 30 |   (compilation && compilation.options) ? compilation.options : {};
 31 | 
 32 | class ScriptExtHtmlWebpackPlugin {
 33 |   constructor (options) {
 34 |     this.options = normaliseOptions(options);
 35 |   }
 36 | 
 37 |   apply (compiler) {
 38 |     const compile = this.compilationCallback.bind(this);
 39 |     const emit = this.emitCallback.bind(this);
 40 |     if (compiler.hooks) {
 41 |       compiler.hooks.compilation.tap(PLUGIN, compile);
 42 |       compiler.hooks.emit.tap(PLUGIN, emit);
 43 |     } else {
 44 |       compiler.plugin('compilation', compile);
 45 |       compiler.plugin('emit', emit);
 46 |     }
 47 |   }
 48 | 
 49 |   compilationCallback (compilation) {
 50 |     const alterAssetTags = this.alterAssetTagsCallback.bind(this, compilation);
 51 |     if (compilation.hooks) {
 52 |       const alterAssetTagGroups = compilation.hooks.htmlWebpackPluginAlterAssetTags || htmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups;
 53 |       alterAssetTagGroups.tap(PLUGIN, alterAssetTags);
 54 |     } else {
 55 |       compilation.plugin(EVENT, alterAssetTags);
 56 |     }
 57 |   }
 58 | 
 59 |   alterAssetTagsCallback (compilation, pluginArgs, callback) {
 60 |     const options = this.options;
 61 |     const headTagName = Object.prototype.hasOwnProperty.call(pluginArgs, 'headTags') ? 'headTags' : 'head';
 62 |     const bodyTagName = Object.prototype.hasOwnProperty.call(pluginArgs, 'bodyTags') ? 'bodyTags' : 'body';
 63 |     try {
 64 |       options.htmlWebpackOptions = getHtmlWebpackOptions(pluginArgs);
 65 |       options.compilationOptions = getCompilationOptions(compilation);
 66 |       debugEvent('starting');
 67 |       if (elements.shouldUpdate(options)) {
 68 |         debugEvent('replacing <head> <script> elements');
 69 |         pluginArgs[headTagName] = elements.update(compilation.assets, options, pluginArgs[headTagName]);
 70 |         debugEvent('replacing <body> <script> elements');
 71 |         pluginArgs[bodyTagName] = elements.update(compilation.assets, options, pluginArgs[bodyTagName]);
 72 |       }
 73 |       if (shouldAddResourceHints(options)) {
 74 |         debugEvent('adding resource hints');
 75 |         pluginArgs[headTagName] = falsySafeConcat([
 76 |           pluginArgs[headTagName],
 77 |           addInitialChunkResourceHints(options, pluginArgs[headTagName]),
 78 |           addInitialChunkResourceHints(options, pluginArgs[bodyTagName]),
 79 |           addAsyncChunkResourceHints(compilation.chunks, options)
 80 |         ]);
 81 |       }
 82 |       if (customAttributes.shouldAdd(options)) {
 83 |         debugEvent('adding custom attribues to <head> <script> elements');
 84 |         pluginArgs[headTagName] = customAttributes.add(options, pluginArgs[headTagName]);
 85 |         debugEvent('adding custom attributes to <body> <script> elements');
 86 |         pluginArgs[bodyTagName] = customAttributes.add(options, pluginArgs[bodyTagName]);
 87 |       }
 88 |       debugEvent('completed');
 89 |       if (callback) {
 90 |         callback(null, pluginArgs);
 91 |       }
 92 |     } catch (err) {
 93 |       if (callback) {
 94 |         callback(err);
 95 |       } else {
 96 |         compilation.errors.push(err);
 97 |       }
 98 |     }
 99 |   }
100 | 
101 |   emitCallback (compilation, callback) {
102 |     const options = this.options;
103 |     if (options.inline.test.length > 0 && options.removeInlinedAssets) {
104 |       debug('emit: deleting assets');
105 |       Object.keys(compilation.assets).forEach((assetName) => {
106 |         if (matches(assetName, options.inline.test)) {
107 |           debug(`emit: deleting asset '${assetName}'`);
108 |           delete compilation.assets[assetName];
109 |         }
110 |       });
111 |     }
112 |     if (callback) {
113 |       callback();
114 |     }
115 |   }
116 | }
117 | 
118 | module.exports = ScriptExtHtmlWebpackPlugin;
119 | 


--------------------------------------------------------------------------------
/spec/config-spec.js:
--------------------------------------------------------------------------------
  1 | /* eslint-env jasmine */
  2 | 'use strict';
  3 | 
  4 | const WebpackConfig = require('webpack-config').default;
  5 | const ScriptExtHtmlWebpackPlugin = require('../index.js');
  6 | const normaliseOptions = require('../lib/config.js');
  7 | const DEFAULT_OPTIONS = normaliseOptions.DEFAULT_OPTIONS;
  8 | 
  9 | describe('Correctly understands all configuration permutations', () => {
 10 |   it('defaults all options if none passed', () => {
 11 |     expect(normaliseOptions()).toEqual(DEFAULT_OPTIONS);
 12 |   });
 13 | 
 14 |   it('defaults all options if null passed', () => {
 15 |     expect(normaliseOptions(null)).toEqual(DEFAULT_OPTIONS);
 16 |   });
 17 | 
 18 |   it('handles single default value', () => {
 19 |     const options = { defaultAttribute: 'async' };
 20 |     const expected = Object.assign({}, DEFAULT_OPTIONS, options);
 21 |     expect(normaliseOptions(options)).toEqual(expected);
 22 |   });
 23 | 
 24 |   it('handles single String pattern', () => {
 25 |     const options = { async: '*.js' };
 26 |     const expected = Object.assign({}, DEFAULT_OPTIONS, {
 27 |       async: {
 28 |         test: ['*.js']
 29 |       }
 30 |     });
 31 |     expect(normaliseOptions(options)).toEqual(expected);
 32 |   });
 33 | 
 34 |   it('handles single Regex pattern', () => {
 35 |     const options = { inline: /\*.js$/ };
 36 |     const expected = Object.assign({}, DEFAULT_OPTIONS, {
 37 |       inline: {
 38 |         test: [/\*.js$/]
 39 |       }
 40 |     });
 41 |     expect(normaliseOptions(options)).toEqual(expected);
 42 |   });
 43 | 
 44 |   it('handles Array of String and Regex patterns', () => {
 45 |     const options = { defer: ['*.js', /\*.js$/] };
 46 |     const expected = Object.assign({}, DEFAULT_OPTIONS, {
 47 |       defer: {
 48 |         test: ['*.js', /\*.js$/]
 49 |       }
 50 |     });
 51 |     expect(normaliseOptions(options)).toEqual(expected);
 52 |   });
 53 | 
 54 |   it('handles hash configuration with single String for attribute', () => {
 55 |     const options = {
 56 |       module: {
 57 |         test: '*.js'
 58 |       }
 59 |     };
 60 |     const expected = Object.assign({}, DEFAULT_OPTIONS, {
 61 |       module: {
 62 |         test: ['*.js']
 63 |       }
 64 |     });
 65 |     expect(normaliseOptions(options)).toEqual(expected);
 66 |   });
 67 | 
 68 |   it('handles full hash configuration for attribute', () => {
 69 |     const options = {
 70 |       module: {
 71 |         test: ['*.js', /\*.js$/]
 72 |       }
 73 |     };
 74 |     const expected = Object.assign({}, DEFAULT_OPTIONS, {
 75 |       module: {
 76 |         test: ['*.js', /\*.js$/]
 77 |       }
 78 |     });
 79 |     expect(normaliseOptions(options)).toEqual(expected);
 80 |   });
 81 | 
 82 |   it('handles single Regex pattern for resource hint', () => {
 83 |     const options = { preload: /\*.js$/ };
 84 |     const expected = Object.assign({}, DEFAULT_OPTIONS, {
 85 |       preload: {
 86 |         test: [/\*.js$/],
 87 |         chunks: 'initial'
 88 |       }
 89 |     });
 90 |     expect(normaliseOptions(options)).toEqual(expected);
 91 |   });
 92 | 
 93 |   it('handles Array of String and Regex patterns for resource hint', () => {
 94 |     const options = { prefetch: ['*.js', /\*.js$/] };
 95 |     const expected = Object.assign({}, DEFAULT_OPTIONS, {
 96 |       prefetch: {
 97 |         test: ['*.js', /\*.js$/],
 98 |         chunks: 'initial'
 99 |       }
100 |     });
101 |     expect(normaliseOptions(options)).toEqual(expected);
102 |   });
103 | 
104 |   it('handles partial hash configuration for resource hint', () => {
105 |     const options = {
106 |       preload: {
107 |         test: ['*.js', /\*.js$/]
108 |       }
109 |     };
110 |     const expected = Object.assign({}, DEFAULT_OPTIONS, {
111 |       preload: {
112 |         test: ['*.js', /\*.js$/],
113 |         chunks: 'initial'
114 |       }
115 |     });
116 |     expect(normaliseOptions(options)).toEqual(expected);
117 |   });
118 | 
119 |   it('handles full hash configuration with single string for resource hint', () => {
120 |     const options = {
121 |       preload: {
122 |         test: '.js',
123 |         chunks: 'all'
124 |       }
125 |     };
126 |     const expected = Object.assign({}, DEFAULT_OPTIONS, {
127 |       preload: {
128 |         test: ['.js'],
129 |         chunks: 'all'
130 |       }
131 |     });
132 |     expect(normaliseOptions(options)).toEqual(expected);
133 |   });
134 | 
135 |   it('handles full hash configuration with array for resource hint', () => {
136 |     const options = {
137 |       preload: {
138 |         test: ['.js', /\*.js$/],
139 |         chunks: 'all'
140 |       }
141 |     };
142 |     const expected = Object.assign({}, DEFAULT_OPTIONS, {
143 |       preload: {
144 |         test: ['.js', /\*.js$/],
145 |         chunks: 'all'
146 |       }
147 |     });
148 |     expect(normaliseOptions(options)).toEqual(expected);
149 |   });
150 | 
151 |   it('handles single no value custom attribute', () => {
152 |     const options = {
153 |       custom: {
154 |         test: '*.js',
155 |         attribute: 'wibble'
156 |       }
157 |     };
158 |     const expected = Object.assign({}, DEFAULT_OPTIONS, {
159 |       custom: [{
160 |         test: ['*.js'],
161 |         attribute: 'wibble',
162 |         value: true
163 |       }]
164 |     });
165 |     expect(normaliseOptions(options)).toEqual(expected);
166 |   });
167 | 
168 |   it('handles single custom attribute with a value', () => {
169 |     const options = {
170 |       custom: {
171 |         test: '*.js',
172 |         attribute: 'wibble',
173 |         value: 'wobble'
174 |       }
175 |     };
176 |     const expected = Object.assign({}, DEFAULT_OPTIONS, {
177 |       custom: [{
178 |         test: ['*.js'],
179 |         attribute: 'wibble',
180 |         value: 'wobble'
181 |       }]
182 |     });
183 |     expect(normaliseOptions(options)).toEqual(expected);
184 |   });
185 | 
186 |   it('handles multiple custom attributes', () => {
187 |     const options = {
188 |       custom: [
189 |         {
190 |           test: '*.js',
191 |           attribute: 'wibble'
192 |         },
193 |         {
194 |           test: 'a',
195 |           attribute: 'wobble',
196 |           value: 'xyz'
197 |         },
198 |         {
199 |           test: 'b',
200 |           attribute: 'warble',
201 |           value: 'grunf'
202 |         }
203 |       ]
204 |     };
205 |     const expected = Object.assign({}, DEFAULT_OPTIONS, {
206 |       custom: [
207 |         {
208 |           test: ['*.js'],
209 |           attribute: 'wibble',
210 |           value: true
211 |         },
212 |         {
213 |           test: ['a'],
214 |           attribute: 'wobble',
215 |           value: 'xyz'
216 |         },
217 |         {
218 |           test: ['b'],
219 |           attribute: 'warble',
220 |           value: 'grunf'
221 |         }
222 | 
223 |       ]
224 |     });
225 |     expect(normaliseOptions(options)).toEqual(expected);
226 |   });
227 | 
228 |   it('works with webpack-config', () => {
229 |     const config = new WebpackConfig().merge({
230 |       plugins: [
231 |         new ScriptExtHtmlWebpackPlugin({
232 |           defaultAttribute: 'defer'
233 |         })
234 |       ]
235 |     });
236 | 
237 |     expect(config.plugins[0].options.defaultAttribute).toEqual('defer');
238 |   });
239 | });
240 | 


--------------------------------------------------------------------------------
/spec/async-spec.js:
--------------------------------------------------------------------------------
  1 | /* eslint-env jasmine */
  2 | 'use strict';
  3 | 
  4 | const path = require('path');
  5 | const deleteDir = require('rimraf');
  6 | const version = require('./helpers/versions.js');
  7 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  8 | const ScriptExtHtmlWebpackPlugin = require('../index.js');
  9 | const testPlugin = require('./helpers/core-test.js');
 10 | 
 11 | const OUTPUT_DIR = path.join(__dirname, '../dist');
 12 | 
 13 | const baseConfig = (scriptExtOptions) => {
 14 |   const config = {
 15 |     entry: path.join(__dirname, 'fixtures/async_script.js'),
 16 |     output: {
 17 |       path: OUTPUT_DIR,
 18 |       filename: 'index_bundle.js',
 19 |       chunkFilename: 'async-chunk[id].js'
 20 |     },
 21 |     plugins: [
 22 |       new HtmlWebpackPlugin(),
 23 |       new ScriptExtHtmlWebpackPlugin(scriptExtOptions)
 24 |     ]
 25 |   };
 26 |   if (version.major === 4) {
 27 |     config.mode = 'production';
 28 |   }
 29 |   return config;
 30 | };
 31 | 
 32 | const baseExpectations = () => ({
 33 |   html: [],
 34 |   js: [],
 35 |   files: expectedFiles(),
 36 |   not: {
 37 |     html: [],
 38 |     js: [],
 39 |     files: []
 40 |   }
 41 | });
 42 | 
 43 | const expectedFiles = () => {
 44 |   return version.major === 1
 45 |     ? [
 46 |       'index.html',
 47 |       'index_bundle.js',
 48 |       'async-chunk1.js',
 49 |       'async-chunk2.js'
 50 |     ]
 51 |     : [
 52 |       'index.html',
 53 |       'index_bundle.js',
 54 |       'async-chunk0.js',
 55 |       'async-chunk1.js'
 56 |     ];
 57 | };
 58 | 
 59 | describe(`Async functionality (webpack ${version.display})`, function () {
 60 |   beforeEach((done) => {
 61 |     deleteDir(OUTPUT_DIR, done);
 62 |   });
 63 | 
 64 |   it('adds async chunks to preload', (done) => {
 65 |     const config = baseConfig(
 66 |       {
 67 |         defaultAttribute: 'async',
 68 |         preload: {
 69 |           test: /\.js$/,
 70 |           chunks: 'async'
 71 |         }
 72 |       }
 73 |     );
 74 |     const expected = baseExpectations();
 75 |     if (version.major === 1) {
 76 |       expected.html = [
 77 |         /(<script (type="text\/javascript" )?src="index_bundle.js" async(="async")?><\/script>)/,
 78 |         /(<link rel="preload" href="async-chunk1.js" as="script"((>)|(\/>)|(><\/link>)))/,
 79 |         /(<link rel="preload" href="async-chunk2.js" as="script"((>)|(\/>)|(><\/link>)))/
 80 |       ];
 81 |     } else {
 82 |       expected.html = [
 83 |         /(<script (type="text\/javascript" )?src="index_bundle.js" async(="async")?><\/script>)/,
 84 |         /(<link rel="preload" href="async-chunk0.js" as="script"((>)|(\/>)|(><\/link>)))/,
 85 |         /(<link rel="preload" href="async-chunk1.js" as="script"((>)|(\/>)|(><\/link>)))/
 86 |       ];
 87 |     }
 88 |     testPlugin(config, expected, done);
 89 |   });
 90 | 
 91 |   it('adds async chunks to prefetch', (done) => {
 92 |     const config = baseConfig(
 93 |       {
 94 |         defaultAttribute: 'async',
 95 |         prefetch: {
 96 |           test: /\.js$/,
 97 |           chunks: 'async'
 98 |         }
 99 |       }
100 |     );
101 |     const expected = baseExpectations();
102 |     if (version.major === 1) {
103 |       expected.html = [
104 |         /(<script (type="text\/javascript" )?src="index_bundle.js" async(="async")?><\/script>)/,
105 |         /(<link rel="prefetch" href="async-chunk1.js" as="script"((>)|(\/>)|(><\/link>)))/,
106 |         /(<link rel="prefetch" href="async-chunk2.js" as="script"((>)|(\/>)|(><\/link>)))/
107 |       ];
108 |     } else {
109 |       expected.html = [
110 |         /(<script (type="text\/javascript" )?src="index_bundle.js" async(="async")?><\/script>)/,
111 |         /(<link rel="prefetch" href="async-chunk0.js" as="script"((>)|(\/>)|(><\/link>)))/,
112 |         /(<link rel="prefetch" href="async-chunk1.js" as="script"((>)|(\/>)|(><\/link>)))/
113 |       ];
114 |     }
115 |     testPlugin(config, expected, done);
116 |   });
117 | 
118 |   it('adds selected sync chunks to prefetch', (done) => {
119 |     const config = baseConfig(
120 |       {
121 |         defaultAttribute: 'async',
122 |         prefetch: {
123 |           test: ['1'],
124 |           chunks: 'async'
125 |         }
126 |       }
127 |     );
128 |     const expected = baseExpectations();
129 |     expected.html = [
130 |       /(<script (type="text\/javascript" )?src="index_bundle.js" async(="async")?><\/script>)/,
131 |       /(<link rel="prefetch" href="async-chunk1.js" as="script"((>)|(\/>)|(><\/link>)))/
132 |     ];
133 |     if (version.major === 1) {
134 |       expected.not.html = [
135 |         /(<link rel="prefetch" href="async-chunk0.js" as="script"((>)|(\/>)|(><\/link>)))/
136 |       ];
137 |     } else {
138 |       expected.not.html = [
139 |         /(<link rel="prefetch" href="async-chunk0.js" as="script"((>)|(\/>)|(><\/link>)))/
140 |       ];
141 |     }
142 |     testPlugin(config, expected, done);
143 |   });
144 | 
145 |   it('adds async preload chunks ahead of async prefetch', (done) => {
146 |     const config = baseConfig(
147 |       {
148 |         defaultAttribute: 'async',
149 |         prefetch: {
150 |           test: /\.js$/,
151 |           chunks: 'async'
152 |         },
153 |         preload: {
154 |           test: '1',
155 |           chunks: 'async'
156 |         }
157 |       }
158 |     );
159 |     const expected = baseExpectations();
160 |     if (version.major === 1) {
161 |       expected.html = [
162 |         /(<script (type="text\/javascript" )?src="index_bundle.js" async(="async")?><\/script>)/,
163 |         /(<link rel="preload" href="async-chunk1.js" as="script"((>)|(\/>)|(><\/link>)))/,
164 |         /(<link rel="prefetch" href="async-chunk2.js" as="script"((>)|(\/>)|(><\/link>)))/
165 |       ];
166 |     } else {
167 |       expected.html = [
168 |         /(<script (type="text\/javascript" )?src="index_bundle.js" async(="async")?><\/script>)/,
169 |         /(<link rel="prefetch" href="async-chunk0.js" as="script"((>)|(\/>)|(><\/link>)))/,
170 |         /(<link rel="preload" href="async-chunk1.js" as="script"((>)|(\/>)|(><\/link>)))/
171 |       ];
172 |     }
173 |     testPlugin(config, expected, done);
174 |   });
175 | 
176 |   it('adds async and initial chunks to preload', (done) => {
177 |     const config = baseConfig(
178 |       {
179 |         defaultAttribute: 'defer',
180 |         preload: {
181 |           test: /\.js$/,
182 |           chunks: 'all'
183 |         }
184 |       }
185 |     );
186 |     const expected = baseExpectations();
187 |     if (version.major === 1) {
188 |       expected.html = [
189 |         /(<script (type="text\/javascript" )?(src="index_bundle.js" defer(="defer")?)|(defer(="defer")? src="index_bundle.js")><\/script>)/,
190 |         /(<link rel="preload" href="index_bundle.js" as="script"((>)|(\/>)|(><\/link>)))/,
191 |         /(<link rel="preload" href="async-chunk1.js" as="script"((>)|(\/>)|(><\/link>)))/,
192 |         /(<link rel="preload" href="async-chunk2.js" as="script"((>)|(\/>)|(><\/link>)))/
193 |       ];
194 |     } else {
195 |       expected.html = [
196 |         /(<script (type="text\/javascript" )?(src="index_bundle.js" defer(="defer")?)|(defer(="defer")? src="index_bundle.js")><\/script>)/,
197 |         /(<link rel="preload" href="index_bundle.js" as="script"((>)|(\/>)|(><\/link>)))/,
198 |         /(<link rel="preload" href="async-chunk0.js" as="script"((>)|(\/>)|(><\/link>)))/,
199 |         /(<link rel="preload" href="async-chunk1.js" as="script"((>)|(\/>)|(><\/link>)))/
200 |       ];
201 |     }
202 |     testPlugin(config, expected, done);
203 |   });
204 | 
205 |   it('adds only initial chunks to prefetch', (done) => {
206 |     const config = baseConfig(
207 |       {
208 |         defaultAttribute: 'defer',
209 |         preload: {
210 |           test: /\.js$/,
211 |           chunks: 'initial'
212 |         }
213 |       }
214 |     );
215 |     const expected = baseExpectations();
216 |     expected.html = [
217 |       /(<script (type="text\/javascript" )?(src="index_bundle.js" defer(="defer")?)|(defer(="defer")? src="index_bundle.js")><\/script>)/,
218 |       /(<link rel="preload" href="index_bundle.js" as="script"((>)|(\/>)|(><\/link>)))/
219 |     ];
220 |     if (version.major === 1) {
221 |       expected.not.html = [
222 |         /(<link rel="preload" href="async-chunk1.js" as="script"((>)|(\/>)|(><\/link>)))/,
223 |         /(<link rel="preload" href="async-chunk2.js" as="script"((>)|(\/>)|(><\/link>)))/
224 |       ];
225 |     } else {
226 |       expected.not.html = [
227 |         /(<link rel="preload" href="async-chunk0.js" as="script"((>)|(\/>)|(><\/link>)))/,
228 |         /(<link rel="preload" href="async-chunk1.js" as="script"((>)|(\/>)|(><\/link>)))/
229 |       ];
230 |     }
231 |     testPlugin(config, expected, done);
232 |   });
233 | 
234 |   it('async chunks cope with public path', (done) => {
235 |     const config = baseConfig(
236 |       {
237 |         defaultAttribute: 'async',
238 |         preload: {
239 |           test: /\.js$/,
240 |           chunks: 'async'
241 |         }
242 |       }
243 |     );
244 |     config.output.publicPath = '/subdomain/';
245 |     const expected = baseExpectations();
246 |     if (version.major === 1) {
247 |       expected.html = [
248 |         /(<script (type="text\/javascript" )?src="\/subdomain\/index_bundle.js" async(="async")?><\/script>)/,
249 |         /(<link rel="preload" href="\/subdomain\/async-chunk1.js" as="script"((>)|(\/>)|(><\/link>)))/,
250 |         /(<link rel="preload" href="\/subdomain\/async-chunk2.js" as="script"((>)|(\/>)|(><\/link>)))/
251 |       ];
252 |     } else {
253 |       expected.html = [
254 |         /(<script (type="text\/javascript" )?src="\/subdomain\/index_bundle.js" async(="async")?><\/script>)/,
255 |         /(<link rel="preload" href="\/subdomain\/async-chunk0.js" as="script"((>)|(\/>)|(><\/link>)))/,
256 |         /(<link rel="preload" href="\/subdomain\/async-chunk1.js" as="script"((>)|(\/>)|(><\/link>)))/
257 |       ];
258 |     }
259 |     testPlugin(config, expected, done);
260 |   });
261 | 
262 |   it('all chunks cope with public path (no ending forward slash)', (done) => {
263 |     const config = baseConfig(
264 |       {
265 |         defaultAttribute: 'async',
266 |         preload: {
267 |           test: 'js',
268 |           chunks: 'all'
269 |         }
270 |       }
271 |     );
272 |     config.output.publicPath = '/subdomain';
273 |     const expected = baseExpectations();
274 |     if (version.major === 1) {
275 |       expected.html = [
276 |         /(<script (type="text\/javascript" )?src="\/subdomain\/index_bundle.js" async(="async")?><\/script>)/,
277 |         /(<link rel="preload" href="\/subdomain\/index_bundle.js" as="script"((>)|(\/>)|(><\/link>)))/,
278 |         /(<link rel="preload" href="\/subdomain\/async-chunk1.js" as="script"((>)|(\/>)|(><\/link>)))/,
279 |         /(<link rel="preload" href="\/subdomain\/async-chunk2.js" as="script"((>)|(\/>)|(><\/link>)))/
280 |       ];
281 |     } else {
282 |       expected.html = [
283 |         /(<script (type="text\/javascript" )?src="\/subdomain\/index_bundle.js" async(="async")?><\/script>)/,
284 |         /(<link rel="preload" href="\/subdomain\/index_bundle.js" as="script"((>)|(\/>)|(><\/link>)))/,
285 |         /(<link rel="preload" href="\/subdomain\/async-chunk0.js" as="script"((>)|(\/>)|(><\/link>)))/,
286 |         /(<link rel="preload" href="\/subdomain\/async-chunk1.js" as="script"((>)|(\/>)|(><\/link>)))/
287 |       ];
288 |     }
289 |     testPlugin(config, expected, done);
290 |   });
291 | });
292 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | Script Extension for HTML Webpack Plugin
  2 | ========================================
  3 | [![npm version](https://badge.fury.io/js/script-ext-html-webpack-plugin.svg)](http://badge.fury.io/js/script-ext-html-webpack-plugin) [![Dependency Status](https://david-dm.org/numical/script-ext-html-webpack-plugin.svg)](https://david-dm.org/numical/script-ext-html-webpack-plugin) [![Build status](https://travis-ci.org/numical/script-ext-html-webpack-plugin.svg)](https://travis-ci.org/numical/script-ext-html-webpack-plugin) [![js-semistandard-style](https://img.shields.io/badge/code%20style-semistandard-brightgreen.svg?style=flat-square)](https://github.com/Flet/semistandard)
  4 | 
  5 | [![NPM](https://nodei.co/npm/script-ext-html-webpack-plugin.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/script-ext-html-webpack-plugin/)
  6 | 
  7 | Deprecation Warning
  8 | -------------------
  9 | **tl;dr**  
 10 | This project is no longer maintained.  It does not support Webpack 5.  
 11 | 
 12 | **A bit more detail**  
 13 | Any look at the [project activity](https://github.com/numical/script-ext-html-webpack-plugin/pulse) will show that I have not been able to maintain this project adequately.  
 14 | The advent of version 5 of Webpack requires another bout of refactoring that I simply have no time for.  
 15 | Consequently v2.15.0 will be the last version of this plugin.
 16 | My thanks to all users, and especially to all contributors, of this plugin over the years.  
 17 | My apologies to all those whose webpack 5 migration has been made more complicated by this decision.
 18 | 
 19 | **But I still want to use the plugin...**  
 20 | Feel free!  
 21 | My last update works with versions of v4.44.2 of webpack and v4.5.0 of html-webpack-plugin.  
 22 | Forkers feel free!  That's what the licence is for.  
 23 | In fact, if you fork with an intention to support on-going development, let me know!
 24 | I'll happily link to your repository here and offer some tips (main one: ditch backward compatibility - it's a pain).  
 25 | I will formally archive this repository at the end of the 2020. 
 26 | 
 27 | 
 28 | Summary
 29 | -------
 30 | Enhances [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)
 31 | functionality with different deployment options for your scripts including:
 32 | - [`async`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#Attributes) attribute;
 33 | - [`defer`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#Attributes) attribute;
 34 | - [`type="module"`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#Attributes) attribute;
 35 | - any custom attributes you wish to add;
 36 | - inlining;
 37 | - [`preload`](https://www.w3.org/TR/preload/) resource hint;
 38 | - [`prefetch`](https://www.w3.org/TR/resource-hints/#dfn-prefetch) resource hint
 39 | 
 40 | This is an extension plugin for the [webpack](http://webpack.github.io) plugin [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) - a plugin that simplifies the creation of HTML files to serve your webpack bundles.
 41 | 
 42 | The raw [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) incorporates all webpack-generated javascipt as synchronous`<script>` elements in the generated html.  This plugin allows you to:
 43 | - add standard and custom attributes to these elements;
 44 | - inline the code in the elements;
 45 | - add prefetch and preload resource hints for initial and dynamically loaded scripts.
 46 | 
 47 | Installation
 48 | ------------
 49 | You must be running webpack (1.x, 2.x, 3.x, 4.x) on node 6+.
 50 | Install the plugin with npm:
 51 | ```shell
 52 | $ npm install --save-dev script-ext-html-webpack-plugin
 53 | ```
 54 | Not that you will need v3.0.6+ or v4.x of [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)
 55 | 
 56 | For those requiring earlier versions of node, please use the [last 1.x version](https://github.com/numical/script-ext-html-webpack-plugin/tree/v1.8.8) of this plugin.  However please note this does not have webpack 4.x support:
 57 | ```shell
 58 | $ npm install --save-dev script-ext-html-webpack-plugin@1.8.8
 59 | ```
 60 | 
 61 | You may see an `UNMET PEER DEPENDENCY` warnings for webpack and various plugins.
 62 | 
 63 | This is fine; in testing, we dynamically download multiple versions of webpack (via the [dynavers](https://github.com/numical/dynavers) module).
 64 | 
 65 | 
 66 | Basic Usage
 67 | -----------
 68 | Add the plugin to your webpack config as follows: 
 69 | 
 70 | ```javascript
 71 | plugins: [
 72 |   new HtmlWebpackPlugin(),
 73 |   new ScriptExtHtmlWebpackPlugin()
 74 | ]  
 75 | ```
 76 | The order is important - the plugin must come **after** HtmlWebpackPlugin.
 77 | 
 78 | The above configuration will actually do nothing due to the configuration defaults. 
 79 | 
 80 | Some more useful scenarios:
 81 | 
 82 | All scripts set to `async`:
 83 | ```javascript
 84 | plugins: [
 85 |   new HtmlWebpackPlugin(),
 86 |   new ScriptExtHtmlWebpackPlugin({
 87 |     defaultAttribute: 'async'
 88 |   })
 89 | ]  
 90 | ```
 91 | 
 92 | All scripts set to `async` except 'first.js' which is sync:
 93 | ```javascript
 94 | plugins: [
 95 |   new HtmlWebpackPlugin(),
 96 |   new ScriptExtHtmlWebpackPlugin({
 97 |     sync: 'first.js',
 98 |     defaultAttribute: 'async'
 99 |   })
100 | ]  
101 | ```
102 | 
103 | Configuration offers much more complex options:
104 | 
105 | Configuration
106 | -------------
107 | You must pass a hash of configuration options to the plugin to cause the addition of attributes:
108 | - `inline`: a __script matching pattern__ defining scripts that should be inlined in the html (default: `[]`);
109 | - `sync`: a  __script matching pattern__ defining script names that should have no attribute (default: `[]`);
110 | - `async`: a __script matching pattern__ defining script names that should have an `async` attribute (default: `[]`);
111 | - `defer`: a __script matching pattern__ defining script names that should have a `defer` attribute (default: `[]`);
112 | - `defaultAttribute`: `'sync' | 'async' | 'defer'` The default attribute to set - `'sync'` actually results in no attribute (default: `'sync'`);
113 | - `module`: a __script matching pattern__ defining script names that should have a
114 | `type="module"` attribute (default: `[]`);
115 | - `preload`: a __script matching pattern__ defining scripts that should have accompanying preload resource hints (default: `[]`);
116 | - `prefetch`: a __script matching pattern__ defining scripts that should have accompanying prefetch resource hints (default: `[]`);
117 | - `custom`: a single hash or an array of hashes with the following structure:
118 |     - `test`: a **script matching pattern** defining scripts that should have a custom attribute added;
119 |     - `attribute`: a `String` attribute to add;
120 |     - `value`: (optional) a `String` value for the attribute; if not set the attribute has no value set (equivalent of `true`).
121 | 
122 | A __script matching pattern__ matches against a script's name.  It can be one of:
123 | - a `String`-  matches if it is a substring of the script name;
124 | - a `RegExp`;
125 | - an array of `String`'s and/or `RegExp`'s - matches if any one element matches;
126 | - a hash with property `test` with a value of one of the above.
127 | 
128 | In more complicated use cases it may prove difficult to ensure that the pattern matching for different attributes are mutually exclusive.  To prevent confusion, the plugin operates a simple precedence model:
129 | 
130 | 1. if a script name matches the`inline` script matching pattern, it will be inlined;
131 | 
132 | 2. if a script name matches the `sync` script matching pattern, it will have no attribute, *unless* it matched condition 1;
133 | 
134 | 3. if a script name the `async` script matching pattern, it will have the `async` attribute, *unless* it matched conditions 1 or 2;
135 | 
136 | 4. if a script name matches the `defer` script matching pattern, it will have the `defer` attribute, *unless* it matched conditions 1, 2 or 3;
137 | 
138 | 5. if a script name does not match any of the previous conditions, it will have the `defaultAttribute' attribute.
139 | 
140 | The `module` attribute is independent of conditions 2-5, but will be ignored if the script isinlined.
141 | 
142 | 
143 | Dynamically Loaded Scripts
144 | --------------------------
145 | The `preload` and `prefetch` configuration also have allow an additional property in the hash form that can be passed to include dynamically loaded (asynchronous) scripts.  This property is `chunks` and can have one of the following `String` values:
146 | - `initial`: default behaviour, no asynchronour scripts;
147 | - `async`: only asynchronouse scripts;
148 | - `all`: all scripts
149 | Note that you must still supply a `test` __script matching pattern__ which is also applied when selecting scripts.
150 | 
151 | 
152 | Configuration Examples
153 | ---------------------
154 | 
155 | All scripts with 'important' in their name are sync and all others set to `defer`:
156 | ```javascript
157 | plugins: [
158 |   new HtmlWebpackPlugin(),
159 |   new ScriptExtHtmlWebpackPlugin({
160 |     sync: 'important',
161 |     defaultAttribute: 'defer'
162 |   })
163 | ]  
164 | ```
165 | 
166 | Alternatively, using a regular expression:
167 | ```javascript
168 | plugins: [
169 |   new HtmlWebpackPlugin(),
170 |   new ScriptExtHtmlWebpackPlugin({
171 |     sync: /important/,
172 |     defaultAttribute: 'defer'
173 |   })
174 | ]  
175 | ```
176 | 
177 | All scripts with 'mod' in their name are async and type 'module', all others are sync (no explicit setting for this as it is the default):
178 | ```javascript
179 | plugins: [
180 |   new HtmlWebpackPlugin(),
181 |   new ScriptExtHtmlWebpackPlugin({
182 |     async: 'mod',
183 |     module: 'mod'
184 |   })
185 | ]  
186 | ```
187 | 
188 | Script 'startup.js' is inlined whilst all other scripts are async and preloaded:
189 | ```javascript
190 | plugins: [
191 |   new HtmlWebpackPlugin(),
192 |   new ScriptExtHtmlWebpackPlugin({
193 |     inline: 'startup',
194 |     preload: /\.js$/,
195 |     defaultAttribute: 'async'
196 |   })
197 | ]  
198 | ```
199 | 
200 | All scripts are preloaded with a ```crossorigin``` attribute set to enable CDN's:
201 | ```javascript
202 | plugins: [
203 |   new HtmlWebpackPlugin(),
204 |   new ScriptExtHtmlWebpackPlugin({
205 |     custom: {
206 |       test: /\.js$/,
207 |       attribute: 'crossorigin',
208 |       value: 'anonymous'
209 |     },
210 |     preload: {
211 |       test: /\.js$/
212 |     }
213 |   })
214 | ]  
215 | ```
216 | 
217 | All asynchronous scripts are added as `preload` resource hints.  All other scripts are `async`:
218 | ```javascript
219 | plugins: [
220 |   new HtmlWebpackPlugin(),
221 |   new ScriptExtHtmlWebpackPlugin({
222 |     async: /\.js$/,
223 |     preload: {
224 |       test: /\.js$/,
225 |       chunks: 'async'
226 |     }
227 |   })
228 | ]  
229 | ```
230 | 
231 | All scripts have custom attribute `type='text/paperscript'` and ui.js also has a custom attribute of `id='1235'`:
232 | ```javascript
233 | plugins: [
234 |   new HtmlWebpackPlugin(),
235 |   new ScriptExtHtmlWebpackPlugin({
236 |     custom: [
237 |       {
238 |         test: /\.js$/,
239 |         attribute: 'type',
240 |         value: 'text/paperscript'
241 |       },
242 |       {
243 |         test: 'ui.js',
244 |         attribute: 'id',
245 |         value: '12345'
246 |       }
247 |     ]
248 |   })
249 | ]  
250 | ```
251 | 
252 | And so on, to craziness:
253 | ```javascript
254 | plugins: [
255 |   new HtmlWebpackPlugin(),
256 |   new ScriptExtHtmlWebpackPlugin({
257 |     inline: 'startup',  
258 |     sync: [/imp(1|2){1,3}}/, 'initial'],
259 |     defer: ['slow', /big.*andslow/],
260 |     module: [/^((?!sync).)*/, 'mod'],
261 |     prefetch: 'indirectly-referenced.js',
262 |     defaultAttribute: 'async'
263 |   })
264 | ]  
265 | ```
266 | 
267 | Any problems with real-world examples, just raise an issue.  
268 | 
269 | 
270 | A Note on Script Names
271 | ----------------------
272 | In the above examples the actual script names are used to select the deployment option.  You may not wish to couple asset names to your deployment like this.  Instead you can use [Webpack's entry configuration](https://webpack.js.org/concepts/entry-points/#object-syntax) to create aliases that the plugin will then use for its pattern matching. Your `webpack.config.js` will look something like this:
273 | ```javascript
274 | entry: {
275 |   a: path.join(__dirname, 'lib/myFunctions.js'),
276 |   b: path.join(__dirname, 'lib/otherFunctions.js'),
277 |   c: path.join(__dirname, 'lib/criticalFuntions.js')
278 | },
279 | output: {
280 |   ...
281 |   filename: '[name].js'
282 | }
283 | plugins: [
284 |   new HtmlWebpackPlugin(),
285 |   new ScriptExtHtmlWebpackPlugin({
286 |     inline: ['c'],  
287 |     defer: ['a', 'b']
288 |   })
289 | ]  
290 | ```
291 | 
292 | 
293 | Inlining
294 | --------
295 | Several notes and caveats apply:
296 | * This feature is for `<script>`'s only. If you wish to inline css please see the sister plugin
297 | [style-ext-html-webpack-plugin](https://github.com/numical/style-ext-html-webpack-plugin).
298 | * Even the simplest script will be wrapped with webpack boilerplate; ensure you minify your javascript if you want your output html to be legible!
299 | * Hot replacement of inlined scripts will only work if caching is [switched off](https://github.com/jantimon/html-webpack-plugin#configuration) for html-webpack-plugin:
300 | ```javascript
301 | plugins: [
302 |     new HtmlWebpackPlugin({
303 |       cache: false
304 |     }),
305 |     new ScriptExtHtmlWebpackPlugin({
306 |       inline: ['myinlinedscript.js']
307 |     })
308 | ]
309 | ```
310 | * An alternative approach, based on jade templates is illustrated in the [HtmlWebpackPlugin inline example](https://github.com/jantimon/html-webpack-plugin/tree/master/examples/inline).
311 | 
312 | 
313 | Resource Hints
314 | --------------
315 | In most cases, modern browsers will intelligently preload referenced script assets.
316 | However if you wish, this plugin can add resource hint elements to the `<head>` element of the form:
317 | ```html
318 | <link rel="[preload|prefetch]" href="[scriptname]" as="script">
319 | ```
320 | Use the `preload` and `prefetch` configuration options.
321 | Where `preload` and `prefetch` patterns overlap, `preload` takes precedence.
322 | 
323 | Possibly a more compelling use case is to preload/prefetch dynamically loaded scripts generated by Webpack's [code splitting](https://webpack.js.org/guides/code-splitting-require). Since v1.7.0, this plugin can do this - see 'Dynamically Loaded Scripts' above.
324 | 
325 | 
326 | Notes:
327 | - custom attributes will be added to resource hints with the same *script matching pattern*.  This is useful for adding such attributes as ```crossorigin="anonymous"``` - see the Configuration Examples above;  
328 | - for more on resource hints, see the [`w3c`](https://www.w3.org/TR/resource-hints) definition;  
329 | - for a more complete solution that allows the preloading\fetching of assets other than scripts, see the [resource-hints-webpack-plugin](https://github.com/jantimon/resource-hints-webpack-plugin).
330 | 
331 | 
332 | 
333 | Change History
334 | --------------
335 | 
336 | v2.1.5
337 | * end of life version
338 | * updated all dependencies
339 | * fixes some tests to accomodate change in html-webpack-plugin output
340 | * added end-of-life section to README.
341 | 
342 | v2.1.x
343 | * support for changes in html-webpack-plugin 4.x since alpha and beta
344 | * custom attributes now added to resource hints too (see [pull request 53](https://github.com/numical/script-ext-html-webpack-plugin/pull/53) for discussion)
345 | * update dependencies
346 | 
347 | v2.0.x
348 | * support html-webpack-plugin 4.x - huge thanks to [@snadn](https://github.com/snadn)
349 | * support webpack 4.x - huge thanks to [@sherlock1982](https://github.com/sherlock1982)
350 | * node 9.x 10,x, 11.x testing
351 | * remove support for node 4.x and 5.x
352 | * remove Appveyor config
353 | * temporary remove  Handlebars test until loader supports webpack 4.x
354 | 
355 | v1.8.x
356 | * added custom attributes - now works on inline scripts as well e.g. for CSP nonces, -thanks [@niieani](https://github.com/niieani) and [@phallguy](https://github.com/phallguy)
357 | * compatible with [webpack-config](https://www.npmjs.com/package/webpack-config) - thanks [@avaly](https://github.com/avaly)
358 | * node v8+ and webback 3.x testing
359 | * resource hints handle public paths without end separators - thanks [@albv](https://githun.com/albv)
360 | * updated dependencies (including dev and peer) - thanks [@ai](https://github.com/ai), [@malikshahzad228](https://github.com/malikshahzad228)
361 | * windows-proofed public paths - thanks [@mstijak](https://github.com/mstijak), [@Jesseyx](https://github.com/Jesseyx)
362 | * added appveyor support for windows build and testing - CURRENTLY SWITCHED OFF
363 | 
364 | v1.7.x
365 | * updated for Webpack 2.5.x and updated all dependencies
366 | * adds asynchronous script resource hints
367 | * fixed [issue 13](https://github.com/numical/script-ext-html-webpack-plugin/issues/13) - inline functionality not working with HtmlWebpackPlugin hashing
368 | * fixed [issue 16](https://github.com/numical/script-ext-html-webpack-plugin/issues/16) - unnecessary <link> closing tag
369 | * fixed [issue 18](https://github.com/numical/script-ext-html-webpack-plugin/issues/18) - added defensive coding against unpopulated event arguments
370 | * refactored for better handling of `publicPath` - thanks [@koalaink](https://github.com/koalaink)
371 | 
372 | v1.6.x
373 | * works with webpack 2.2.1
374 | * enhanced API (no need to use array), fully backwardly compatible
375 | * refactor in preparation for v2
376 | 
377 | v1.5.x
378 | * added resource hints
379 | * works with webpack 2.2.0
380 | 
381 | v1.4.x
382 | * updated internal mechanism to use new(ish) [HtmlWebpackPlugin event](https://github.com/jantimon/html-webpack-plugin#events)
383 | * improved test mechanism and enhanced test coverage
384 | * added support for `publicPath` for inline scripts - thanks [@JustAboutJeff](https://github.com/JustAboutJeff)
385 | * works with 'webpack -p' - thanks [@brandongoode](https://github.com/brandongoode)
386 | 
387 | v1.3.x
388 | * added `type="text/javascript"` by default, in response to [Safari 9.1.1 bug](https://github.com/jantimon/html-webpack-plugin/issues/309)
389 | * removed experimental status of inline option
390 | * added weback 2.2.x beta support
391 | 
392 | v1.2.x
393 | * added inline option
394 | 
395 | v1.1.x
396 | * added `type="module"` option
397 | 
398 | v1.0.x
399 | * initial release
400 | 


--------------------------------------------------------------------------------
/spec/core-spec.js:
--------------------------------------------------------------------------------
  1 | /* eslint-env jasmine */
  2 | 'use strict';
  3 | 
  4 | const path = require('path');
  5 | const deleteDir = require('rimraf');
  6 | const version = require('./helpers/versions.js');
  7 | const webpack = require('webpack');
  8 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  9 | const ScriptExtHtmlWebpackPlugin = require('../index.js');
 10 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
 11 | const testPlugin = require('./helpers/core-test.js');
 12 | 
 13 | const OUTPUT_DIR = path.join(__dirname, '../dist');
 14 | 
 15 | const baseConfig = (scriptExtOptions, htmlWebpackOptions, outputFilename) => {
 16 |   htmlWebpackOptions = htmlWebpackOptions || {};
 17 |   outputFilename = outputFilename || '[name].js';
 18 |   const config = {
 19 |     entry: {
 20 |       a: path.join(__dirname, 'fixtures/script1.js'),
 21 |       b: path.join(__dirname, 'fixtures/script2.js'),
 22 |       c: path.join(__dirname, 'fixtures/script3.js')
 23 |     },
 24 |     output: {
 25 |       path: OUTPUT_DIR,
 26 |       filename: outputFilename
 27 |     },
 28 |     plugins: [
 29 |       new HtmlWebpackPlugin(htmlWebpackOptions),
 30 |       new ScriptExtHtmlWebpackPlugin(scriptExtOptions)
 31 |     ]
 32 |   };
 33 |   if (version.major === 4) {
 34 |     config.mode = 'production';
 35 |   }
 36 |   return config;
 37 | };
 38 | 
 39 | const baseExpectations = () => ({
 40 |   html: [],
 41 |   js: [],
 42 |   files: [],
 43 |   not: {
 44 |     html: [],
 45 |     js: [],
 46 |     files: []
 47 |   }
 48 | });
 49 | 
 50 | describe(`Core functionality (webpack ${version.display})`, function () {
 51 |   beforeEach((done) => {
 52 |     deleteDir(OUTPUT_DIR, done);
 53 |   });
 54 | 
 55 |   it('does nothing with default settings', (done) => {
 56 |     const config = baseConfig({}, {}, 'index_bundle.js');
 57 |     config.entry = path.join(__dirname, 'fixtures/script1.js');
 58 |     const expected = baseExpectations();
 59 |     expected.html = [
 60 |       /(<script (type="text\/javascript" )?src="index_bundle.js"><\/script>)/
 61 |     ];
 62 |     testPlugin(config, expected, done);
 63 |   });
 64 | 
 65 |   it('sets async default for single script', (done) => {
 66 |     const config = baseConfig(
 67 |       {
 68 |         defaultAttribute: 'async'
 69 |       },
 70 |       {},
 71 |       'index_bundle.js'
 72 |     );
 73 |     config.entry = path.join(__dirname, 'fixtures/script1.js');
 74 |     const expected = baseExpectations();
 75 |     expected.html = [
 76 |       /(<script (type="text\/javascript" )?src="index_bundle.js" async(="async")?><\/script>)/
 77 |     ];
 78 |     testPlugin(config, expected, done);
 79 |   });
 80 | 
 81 |   it('sets async default for single script with webpack chunk hashing', (done) => {
 82 |     const config = baseConfig(
 83 |       {
 84 |         defaultAttribute: 'async'
 85 |       },
 86 |       {},
 87 |       'index_bundle[chunkhash].js'
 88 |     );
 89 |     config.entry = path.join(__dirname, 'fixtures/script1.js');
 90 |     const expected = baseExpectations();
 91 |     expected.html = [
 92 |       /(<script (type="text\/javascript" )?src="index_bundle[0-9a-f]*.js" async(="async")?><\/script>)/
 93 |     ];
 94 |     testPlugin(config, expected, done);
 95 |   });
 96 | 
 97 |   it('sets async default for single script with html-webpack-plugin hashing', (done) => {
 98 |     const config = baseConfig(
 99 |       {
100 |         defaultAttribute: 'async'
101 |       },
102 |       {
103 |         hash: true
104 |       },
105 |       'index_bundle.js'
106 |     );
107 |     config.entry = path.join(__dirname, 'fixtures/script1.js');
108 |     const expected = baseExpectations();
109 |     expected.html = [
110 |       /(<script (type="text\/javascript" )?src="index_bundle.js\?[0-9a-f]*" async(="async")?><\/script>)/
111 |     ];
112 |     testPlugin(config, expected, done);
113 |   });
114 | 
115 |   it('sets defer default for single script', (done) => {
116 |     const config = baseConfig(
117 |       {
118 |         defaultAttribute: 'defer'
119 |       },
120 |       {},
121 |       'index_bundle.js'
122 |     );
123 |     config.entry = path.join(__dirname, 'fixtures/script1.js');
124 |     const expected = baseExpectations();
125 |     expected.html = [
126 |       /(<script (type="text\/javascript" )?(src="index_bundle.js" defer(="defer")?)|(defer(="defer")? src="index_bundle.js")><\/script>)/,
127 |     ];
128 |     testPlugin(config, expected, done);
129 |   });
130 | 
131 |   it('sets defer default for single script', (done) => {
132 |     const config = baseConfig(
133 |       {
134 |         defaultAttribute: 'defer'
135 |       },
136 |       {
137 |         hash: true
138 |       },
139 |       'index_bundle.js'
140 |     );
141 |     config.entry = path.join(__dirname, 'fixtures/script1.js');
142 |     const expected = baseExpectations();
143 |     expected.html = [
144 |       /(<script (type="text\/javascript" )?(src="index_bundle.js\?[0-9a-f]*" defer(="defer")?)|(defer(="defer")? src="index_bundle.js\?[0-9a-f]*")><\/script>)/
145 |     ];
146 |     testPlugin(config, expected, done);
147 |   });
148 | 
149 |   it('sets async default for multiple scripts', (done) => {
150 |     const config = baseConfig(
151 |       {
152 |         defaultAttribute: 'async'
153 |       }
154 |     );
155 |     const expected = baseExpectations();
156 |     expected.html = [
157 |       /(<script (type="text\/javascript" )?src="a.js" async(="async")?><\/script>)/,
158 |       /(<script (type="text\/javascript" )?src="b.js" async(="async")?><\/script>)/,
159 |       /(<script (type="text\/javascript" )?src="c.js" async(="async")?><\/script>)/
160 |     ];
161 |     testPlugin(config, expected, done);
162 |   });
163 | 
164 |   it('async string exceptions and sync default', (done) => {
165 |     const config = baseConfig(
166 |       {
167 |         async: ['a', 'b']
168 |       }
169 |     );
170 |     const expected = baseExpectations();
171 |     expected.html = [
172 |       /(<script (type="text\/javascript" )?src="a.js" async(="async")?><\/script>)/,
173 |       /(<script (type="text\/javascript" )?src="b.js" async(="async")?><\/script>)/,
174 |       /(<script (type="text\/javascript" )?src="c.js"><\/script>)/
175 |     ];
176 |     testPlugin(config, expected, done);
177 |   });
178 | 
179 |   it('sync and defer string exceptions and async default', (done) => {
180 |     const config = baseConfig(
181 |       {
182 |         sync: 'a',
183 |         defer: 'b',
184 |         defaultAttribute: 'async'
185 |       }
186 |     );
187 |     const expected = baseExpectations();
188 |     expected.html = [
189 |       /(<script (type="text\/javascript" )?src="a.js"><\/script>)/,
190 |       /(<script (type="text\/javascript" )?(src="b.js" defer(="defer")?)|(defer(="defer")? src="b.js")><\/script>)/,
191 |       /(<script (type="text\/javascript" )?src="c.js" async(="async")?><\/script>)/
192 |     ];
193 |     testPlugin(config, expected, done);
194 |   });
195 | 
196 |   it('defer regex exceptions and sync default', (done) => {
197 |     const config = baseConfig(
198 |       {
199 |         defer: /(a|b).*/,
200 |         defaultAttribute: 'sync'
201 |       }
202 |     );
203 |     const expected = baseExpectations();
204 |     expected.html = [
205 |       /(<script (type="text\/javascript" )?(src="a.js" defer(="defer")?)|(defer(="defer")? src="a.js")><\/script>)/,
206 |       /(<script (type="text\/javascript" )?(src="b.js" defer(="defer")?)|(defer(="defer")? src="b.js")><\/script>)/,
207 |       /(<script (type="text\/javascript" )?src="c.js"><\/script>)/
208 |     ];
209 |     testPlugin(config, expected, done);
210 |   });
211 | 
212 |   it('sync precedence and defer default', (done) => {
213 |     const config = baseConfig(
214 |       {
215 |         sync: [/(a|c).*/],
216 |         async: ['c'],
217 |         defer: /a.*/,
218 |         defaultAttribute: 'defer'
219 |       }
220 |     );
221 |     const expected = baseExpectations();
222 |     expected.html = [
223 |       /(<script (type="text\/javascript" )?src="a.js"><\/script>)/,
224 |       /(<script (type="text\/javascript" )?(src="b.js" defer(="defer")?)|(defer(="defer")? src="b.js")><\/script>)/,
225 |       /(<script (type="text\/javascript" )?src="c.js"><\/script>)/
226 |     ];
227 |     testPlugin(config, expected, done);
228 |   });
229 | 
230 |   it('async precedence, mixed strings and regex, sync default', (done) => {
231 |     const config = baseConfig(
232 |       {
233 |         async: [/(a|c).*/, 'b'],
234 |         defer: /a.*/,
235 |         defaultAttribute: 'sync'
236 |       }
237 |     );
238 |     const expected = baseExpectations();
239 |     expected.html = [
240 |       /(<script (type="text\/javascript" )?src="a.js" async(="async")?><\/script>)/,
241 |       /(<script (type="text\/javascript" )?src="b.js" async(="async")?><\/script>)/,
242 |       /(<script (type="text\/javascript" )?src="c.js" async(="async")?><\/script>)/
243 |     ];
244 |     testPlugin(config, expected, done);
245 |   });
246 | 
247 |   it('plays happily with other plugins on the same html plugin event', (done) => {
248 |     let otherPluginCalled = false;
249 |     const afterHtmlProcessingCallback = (htmlPluginData, callback) => {
250 |       otherPluginCalled = true;
251 |       // no callback webpack v4+
252 |       if (callback) {
253 |         callback(null, htmlPluginData);
254 |       }
255 |     };
256 |     const compilationCallback = (compilation) => {
257 |       if (compilation.hooks) {
258 |         if (version['html-webpack-plugin'].major >= 4) {
259 |           const htmlWebpackPlugin = require('html-webpack-plugin');
260 |           const alterAssetTagGroups = htmlWebpackPlugin.getHooks(compilation).alterAssetTagGroups;
261 |           alterAssetTagGroups.tap('Test Plugin', afterHtmlProcessingCallback);
262 |         } else {
263 |           compilation.hooks.htmlWebpackPluginAfterHtmlProcessing.tap('Test Plugin', afterHtmlProcessingCallback);
264 |         }
265 |       } else {
266 |         compilation.plugin('html-webpack-plugin-after-html-processing', afterHtmlProcessingCallback);
267 |       }
268 |     };
269 |     const otherPlugin = {
270 |       apply: compiler => {
271 |         if (compiler.hooks) {
272 |           compiler.hooks.compilation.tap('TestPlugin', compilationCallback);
273 |         } else {
274 |           compiler.plugin('compilation', compilationCallback);
275 |         }
276 |       }
277 |     };
278 |     const additionalTest = () => {
279 |       expect(otherPluginCalled).toBe(true);
280 |       done();
281 |     };
282 |     const config = baseConfig(
283 |       {
284 |         defaultAttribute: 'async'
285 |       },
286 |       {},
287 |       'index_bundle.js'
288 |     );
289 |     config.entry = path.join(__dirname, 'fixtures/script1.js');
290 |     config.plugins.push(otherPlugin);
291 |     const expected = baseExpectations();
292 |     expected.html = [
293 |       /(<script (type="text\/javascript" )?src="index_bundle.js" async(="async")?><\/script>)/
294 |     ];
295 |     testPlugin(config, expected, additionalTest);
296 |   });
297 | 
298 |   it('module attribute selectively added', (done) => {
299 |     const config = baseConfig(
300 |       {
301 |         module: 'b',
302 |         defaultAttribute: 'async'
303 |       }
304 |     );
305 |     const expected = baseExpectations();
306 |     expected.html = [
307 |       /(<script (type="text\/javascript" )?src="a.js" async(="async")?><\/script>)/,
308 |       /(<script type="module" src="b.js" async(="async")?><\/script>)|(<script src="b.js" async type="module"><\/script>)/,
309 |       /(<script (type="text\/javascript" )?src="c.js" async(="async")?><\/script>)/
310 |     ];
311 |     testPlugin(config, expected, done);
312 |   });
313 | 
314 |   it('module attribute independent of other attributes', (done) => {
315 |     const config = baseConfig(
316 |       {
317 |         async: 'b',
318 |         defer: /(a|b)/,
319 |         module: ['b', 'c']
320 |       }
321 |     );
322 |     const expected = baseExpectations();
323 |     expected.html = [
324 |       /(<script (type="text\/javascript" )?(src="a.js" defer(="defer")?)|(defer(="defer")? src="a.js")><\/script>)/,
325 |       /(<script type="module" src="b.js" async(="async")?><\/script>)|(<script src="b.js" async type="module"><\/script>)/,
326 |       /(<script type="module" src="c.js"><\/script>)|(<script src="c.js" type="module"><\/script>)/
327 |     ];
328 |     testPlugin(config, expected, done);
329 |   });
330 | 
331 |   it('inlining works for single script', (done) => {
332 |     const config = baseConfig(
333 |       {
334 |         inline: 'b',
335 |         defaultAttribute: 'async'
336 |       }
337 |     );
338 |     const expected = baseExpectations();
339 |     expected.html = [
340 |       /(<script (type="text\/javascript" )?src="a.js" async(="async")?><\/script>)/,
341 |       /(<script>[\s\S]*<\/script>)/,
342 |       /(<script (type="text\/javascript" )?src="c.js" async(="async")?><\/script>)/
343 |     ];
344 |     testPlugin(config, expected, done);
345 |   });
346 | 
347 |   it('inlining works for single script with html-webpack-plugin hashing', (done) => {
348 |     const config = baseConfig(
349 |       {
350 |         inline: 'b',
351 |         defaultAttribute: 'async'
352 |       },
353 |       {
354 |         hash: true
355 |       }
356 |     );
357 |     const expected = baseExpectations();
358 |     expected.html = [
359 |       /(<script (type="text\/javascript" )?src="a.js\?[0-9a-f]*" async(="async")?><\/script>)/,
360 |       /(<script>[\s\S]*<\/script>)/,
361 |       /(<script (type="text\/javascript" )?src="c.js\?[0-9a-f]*" async(="async")?><\/script>)/
362 |     ];
363 |     testPlugin(config, expected, done);
364 |   });
365 | 
366 |   it('works with minimized inlined scripts', done => {
367 |     const config = baseConfig(
368 |       {
369 |         inline: /sim/
370 |       }
371 |     );
372 |     config.entry = {
373 |       a: path.join(__dirname, 'fixtures/script1.js'),
374 |       simple1: path.join(__dirname, 'fixtures/simplescript1.js'),
375 |       simple2: path.join(__dirname, 'fixtures/simplescript2.js')
376 |     };
377 |     if (version.major < 4) {
378 |       config.plugins.push(new webpack.optimize.UglifyJsPlugin());
379 |     } else {
380 |       config.optimization = {
381 |         minimize: true,
382 |         minimizer: [new UglifyJsPlugin()]
383 |       };
384 |     }
385 |     const expected = baseExpectations();
386 |     expected.html = [
387 |       /(<script (type="text\/javascript" )?src="a.js"><\/script>)/,
388 |       /(<script>.*console\.log\("it works!"\).*<\/script>)/,
389 |       /(<script>.*Date\.now\(\).*<\/script>)/
390 |     ];
391 |     testPlugin(config, expected, done);
392 |   });
393 | 
394 |   it('default attribute works with output.publicPath', done => {
395 |     const config = baseConfig(
396 |       {
397 |         defaultAttribute: 'async'
398 |       }
399 |     );
400 |     config.output.publicPath = '/subdomain/subdir/';
401 |     const expected = baseExpectations();
402 |     expected.html = [
403 |       /(<script (type="text\/javascript" )?src="\/subdomain\/subdir\/a.js" async(="async")?><\/script>)/,
404 |       /(<script (type="text\/javascript" )?src="\/subdomain\/subdir\/b.js" async(="async")?><\/script>)/,
405 |       /(<script (type="text\/javascript" )?src="\/subdomain\/subdir\/c.js" async(="async")?><\/script>)/
406 |     ];
407 |     testPlugin(config, expected, done);
408 |   });
409 | 
410 |   it('handles output.publicPath without end separator', done => {
411 |     const config = baseConfig(
412 |       {
413 |         defaultAttribute: 'async'
414 |       }
415 |     );
416 |     config.output.publicPath = '/subdomain/subdir';
417 |     const expected = baseExpectations();
418 |     expected.html = [
419 |       /(<script (type="text\/javascript" )?src="\/subdomain\/subdir\/a.js" async(="async")?><\/script>)/,
420 |       /(<script (type="text\/javascript" )?src="\/subdomain\/subdir\/b.js" async(="async")?><\/script>)/,
421 |       /(<script (type="text\/javascript" )?src="\/subdomain\/subdir\/c.js" async(="async")?><\/script>)/
422 |     ];
423 |     testPlugin(config, expected, done);
424 |   });
425 | 
426 |   it('named scripts work with output.publicPath', done => {
427 |     const config = baseConfig(
428 |       {
429 |         sync: 'a.js',
430 |         hash: true,
431 |         async: ['b.js'],
432 |         defer: 'c.js'
433 |       }
434 |     );
435 |     config.output.publicPath = '/subdomain/subdir/';
436 |     const expected = baseExpectations();
437 |     expected.html = [
438 |       /(<script (type="text\/javascript" )?src="\/subdomain\/subdir\/a.js"><\/script>)/,
439 |       /(<script (type="text\/javascript" )?src="\/subdomain\/subdir\/b.js" async(="async")?><\/script>)/,
440 |       /(<script (type="text\/javascript" )?(src="\/subdomain\/subdir\/c.js" defer(="defer")?)|(defer(="defer")? src="\/subdomain\/subdir\/c.js")><\/script>)/
441 |     ];
442 |     testPlugin(config, expected, done);
443 |   });
444 | 
445 |   it('multiple merged scripts work with output.publicPath', done => {
446 |     const config = baseConfig(
447 |       {
448 |         async: 'main'
449 |       }
450 |     );
451 |     config.entry = [
452 |       path.join(__dirname, 'fixtures/script1.js'),
453 |       path.join(__dirname, 'fixtures/script2.js'),
454 |       path.join(__dirname, 'fixtures/script3.js')
455 |     ];
456 |     config.output.publicPath = '/subdomain/subdir/';
457 |     const expected = baseExpectations();
458 |     expected.html = [
459 |       /(<script (type="text\/javascript" )?src="\/subdomain\/subdir\/main.js" async(="async")?><\/script>)/
460 |     ];
461 |     testPlugin(config, expected, done);
462 |   });
463 | 
464 |   if (version.major < 4) {
465 |     it('works with handlebars template <script> elements', done => {
466 |       const config = baseConfig(
467 |         {},
468 |         {},
469 |         'index_bundle.js'
470 |       );
471 |       config.entry = path.join(__dirname, 'fixtures/script1.js');
472 |       config.plugins = [
473 |         new HtmlWebpackPlugin({
474 |           template: '!!handlebars-loader!spec/fixtures/handlebars_template.hbs',
475 |           testMsg: 'Hello World'
476 |         }),
477 |         new ScriptExtHtmlWebpackPlugin({
478 |           defaultAttribute: 'async'
479 |         })
480 |       ];
481 |       const expected = baseExpectations();
482 |       expected.html = [
483 |         /(<script (type="text\/javascript" )?src="index_bundle.js" async(="async")?><\/script>)/,
484 |         /(<script>[\s\S]*Hello World[\s\S]*<\/script>)/
485 |       ];
486 |       testPlugin(config, expected, done);
487 |     });
488 |   }
489 | 
490 |   it('inline scripts work with output.publicPath', done => {
491 |     const config = baseConfig(
492 |       {
493 |         inline: 'a'
494 |       }
495 |     );
496 |     config.output.publicPath = '/subdomain/';
497 |     const expected = baseExpectations();
498 |     expected.html = [
499 |       /(<script>[\s\S]*<\/script>)/
500 |     ];
501 |     testPlugin(config, expected, done);
502 |   });
503 | 
504 |   it('adds prefetch resource hint for specific script', (done) => {
505 |     const config = baseConfig(
506 |       {
507 |         prefetch: ['index_bundle.js']
508 |       },
509 |       {},
510 |       'index_bundle.js'
511 |     );
512 |     config.entry = path.join(__dirname, 'fixtures/script1.js');
513 |     const expected = baseExpectations();
514 |     expected.html = [
515 |       /(<script (type="text\/javascript" )?src="index_bundle.js"><\/script>)/,
516 |       /(<link rel="prefetch" href="index_bundle.js" as="script"((>)|(\/>)|(><\/link>)))/
517 |     ];
518 |     testPlugin(config, expected, done);
519 |   });
520 | 
521 |   it('adds prefetch resource hint for specific script with html-webpack-plugin hashing', (done) => {
522 |     const config = baseConfig(
523 |       {
524 |         prefetch: ['index_bundle.js']
525 |       },
526 |       {
527 |         hash: true
528 |       },
529 |       'index_bundle.js'
530 |     );
531 |     config.entry = path.join(__dirname, 'fixtures/script1.js');
532 |     const expected = baseExpectations();
533 |     expected.html = [
534 |       /(<script (type="text\/javascript" )?src="index_bundle.js\?[0-9a-f]*"><\/script>)/,
535 |       /(<link rel="prefetch" href="index_bundle.js\?[0-9a-f]*" as="script"((>)|(\/>)|(><\/link>)))/
536 |     ];
537 |     testPlugin(config, expected, done);
538 |   });
539 | 
540 |   it('adds preload resource hint for specific script', (done) => {
541 |     const config = baseConfig(
542 |       {
543 |         preload: 'index_bundle.js'
544 |       },
545 |       {},
546 |       'index_bundle.js'
547 |     );
548 |     config.entry = path.join(__dirname, 'fixtures/script1.js');
549 |     const expected = baseExpectations();
550 |     expected.html = [
551 |       /(<script (type="text\/javascript" )?src="index_bundle.js"><\/script>)/,
552 |       /(<link rel="preload" href="index_bundle.js" as="script"((>)|(\/>)|(><\/link>)))/
553 |     ];
554 |     testPlugin(config, expected, done);
555 |   });
556 | 
557 |   it('adds preload and prefetch for multiple scripts', (done) => {
558 |     const config = baseConfig(
559 |       {
560 |         defaultAttribute: 'async',
561 |         prefetch: [/^a/],
562 |         preload: /^b/
563 |       }
564 |     );
565 |     const expected = baseExpectations();
566 |     expected.html = [
567 |       /(<script (type="text\/javascript" )?src="a.js" async(="async")?><\/script>)/,
568 |       /(<script (type="text\/javascript" )?src="b.js" async(="async")?><\/script>)/,
569 |       /(<script (type="text\/javascript" )?src="c.js" async(="async")?><\/script>)/,
570 |       /(<link rel="prefetch" href="a.js" as="script"((>)|(\/>)|(><\/link>)))/,
571 |       /(<link rel="preload" href="b.js" as="script"((>)|(\/>)|(><\/link>)))/
572 |     ];
573 |     expected.not.html = [
574 |       /(<link rel="prefetch" href="c.js" as="script"((>)|(\/>)|(><\/link>)))/,
575 |       /(<link rel="preload" href="a.js" as="script"((>)|(\/>)|(><\/link>)))/
576 |     ];
577 |     testPlugin(config, expected, done);
578 |   });
579 | 
580 |   it('preload has priority over prefetch', (done) => {
581 |     const config = baseConfig(
582 |       {
583 |         defaultAttribute: 'async',
584 |         defer: ['c.js'],
585 |         prefetch: /\.js$/,
586 |         preload: [/^b/]
587 |       }
588 |     );
589 |     const expected = baseExpectations();
590 |     expected.html = [
591 |       /(<script (type="text\/javascript" )?src="a.js" async(="async")?><\/script>)/,
592 |       /(<script (type="text\/javascript" )?src="b.js" async(="async")?><\/script>)/,
593 |       /(<script (type="text\/javascript" )?(src="c.js" defer(="defer")?)|(defer(="defer")? src="c.js")><\/script>)/,
594 |       /(<link rel="prefetch" href="a.js" as="script"((>)|(\/>)|(><\/link>)))/,
595 |       /(<link rel="preload" href="b.js" as="script"((>)|(\/>)|(><\/link>)))/,
596 |       /(<link rel="prefetch" href="c.js" as="script"((>)|(\/>)|(><\/link>)))/
597 |     ];
598 |     testPlugin(config, expected, done);
599 |   });
600 | 
601 |   it('preload and prefetch include output.publicPath', (done) => {
602 |     const config = baseConfig(
603 |       {
604 |         prefetch: [/^a/],
605 |         preload: /^b/
606 |       }
607 |     );
608 |     config.output.publicPath = '/subdomain/';
609 |     const expected = baseExpectations();
610 |     expected.html = [
611 |       /(<script (type="text\/javascript" )?src="\/subdomain\/a.js"><\/script>)/,
612 |       /(<script (type="text\/javascript" )?src="\/subdomain\/b.js"><\/script>)/,
613 |       /(<script (type="text\/javascript" )?src="\/subdomain\/c.js"><\/script>)/,
614 |       /(<link rel="prefetch" href="\/subdomain\/a.js" as="script"((>)|(\/>)|(><\/link>)))/,
615 |       /(<link rel="preload" href="\/subdomain\/b.js" as="script"((>)|(\/>)|(><\/link>)))/
616 |     ];
617 |     testPlugin(config, expected, done);
618 |   });
619 | 
620 |   it('preload and prefetch handle output.publicPath without end separator', (done) => {
621 |     const config = baseConfig(
622 |       {
623 |         prefetch: [/^a/],
624 |         preload: /^b/
625 |       }
626 |     );
627 |     config.output.publicPath = '/subdomain';
628 |     const expected = baseExpectations();
629 |     expected.html = [
630 |       /(<script (type="text\/javascript" )?src="\/subdomain\/a.js"><\/script>)/,
631 |       /(<script (type="text\/javascript" )?src="\/subdomain\/b.js"><\/script>)/,
632 |       /(<script (type="text\/javascript" )?src="\/subdomain\/c.js"><\/script>)/,
633 |       /(<link rel="prefetch" href="\/subdomain\/a.js" as="script"((>)|(\/>)|(><\/link>)))/,
634 |       /(<link rel="preload" href="\/subdomain\/b.js" as="script"((>)|(\/>)|(><\/link>)))/
635 |     ];
636 |     testPlugin(config, expected, done);
637 |   });
638 | 
639 |   it('adds a custom attribute to a single script', (done) => {
640 |     const config = baseConfig(
641 |       {
642 |         custom: {
643 |           test: /.js$/,
644 |           attribute: 'customattribute'
645 |         }
646 |       },
647 |       {},
648 |       'index_bundle.js'
649 |     );
650 |     config.entry = path.join(__dirname, 'fixtures/script1.js');
651 |     const expected = baseExpectations();
652 |     expected.html = [
653 |       /(<script (type="text\/javascript" )?src="index_bundle.js" customattribute><\/script>)/
654 |     ];
655 |     testPlugin(config, expected, done);
656 |   });
657 | 
658 |   it('adds a custom attribute with a value to a single script', (done) => {
659 |     const config = baseConfig(
660 |       {
661 |         custom: {
662 |           test: /.js$/,
663 |           attribute: 'customattribute',
664 |           value: 'xyz'
665 |         }
666 |       },
667 |       {},
668 |       'index_bundle.js'
669 |     );
670 |     config.entry = path.join(__dirname, 'fixtures/script1.js');
671 |     const expected = baseExpectations();
672 |     expected.html = [
673 |       /(<script (type="text\/javascript" )?src="index_bundle.js" customattribute="xyz"><\/script>)/
674 |     ];
675 |     testPlugin(config, expected, done);
676 |   });
677 | 
678 |   it('custom attributes work with inlined scripts (e.g. nonces)', (done) => {
679 |     const config = baseConfig(
680 |       {
681 |         inline: 'b',
682 |         custom: {
683 |           test: /^$/,
684 |           attribute: 'nonce',
685 |           value: 'abcde'
686 |         }
687 |       }
688 |     );
689 |     const expected = baseExpectations();
690 |     expected.html = [
691 |       /(<script (type="text\/javascript" )?src="a.js"><\/script>)/,
692 |       /(<script nonce="abcde">)/,
693 |       /(<script (type="text\/javascript" )?src="c.js"><\/script>)/
694 |     ];
695 |     testPlugin(config, expected, done);
696 |   });
697 | 
698 |   it('multiple custom attributes over multiple scripts', (done) => {
699 |     const config = baseConfig(
700 |       {
701 |         async: [/(a|c).*/, 'b'],
702 |         defer: /a.*/,
703 |         custom: [
704 |           {
705 |             test: /(a|c)/,
706 |             attribute: 'wibble'
707 |           },
708 |           {
709 |             test: 'a',
710 |             attribute: 'type',
711 |             value: 'text/paperscript'
712 |           }
713 |         ],
714 |         defaultAttribute: 'async'
715 |       }
716 |     );
717 |     const expected = baseExpectations();
718 |     expected.html = [
719 |       /(<script type="text\/paperscript" src="a.js" async wibble><\/script>)|(<script src="a.js" async wibble type="text\/paperscript"><\/script>)/,
720 |       /(<script (type="text\/javascript" )?src="b.js" async(="async")?><\/script>)/,
721 |       /(<script (type="text\/javascript" )?src="c.js" async wibble><\/script>)/
722 |     ];
723 |     testPlugin(config, expected, done);
724 |   });
725 | 
726 |   it('custom attributes also added to prefetch resource hints', (done) => {
727 |     const config = baseConfig(
728 |       {
729 |         custom: {
730 |           test: /.js$/,
731 |           attribute: 'customattribute',
732 |           value: 'xyz'
733 |         },
734 |         prefetch: {
735 |           test: /.js$/
736 |         }
737 |       },
738 |       {},
739 |       'index_bundle.js'
740 |     );
741 |     config.entry = path.join(__dirname, 'fixtures/script1.js');
742 |     const expected = baseExpectations();
743 |     expected.html = [
744 |       /(<script (type="text\/javascript" )?src="index_bundle.js" customattribute="xyz"><\/script>)/,
745 |       /(<link rel="prefetch" href="index_bundle.js" as="script" customattribute="xyz"((>)|(\/>)|(><\/link>)))/
746 |     ];
747 |     testPlugin(config, expected, done);
748 |   });
749 |   it('custom attributes also added to preload resource hints', (done) => {
750 |     const config = baseConfig(
751 |       {
752 |         custom: {
753 |           test: /.js$/,
754 |           attribute: 'customattribute',
755 |           value: 'xyz'
756 |         },
757 |         preload: {
758 |           test: /.js$/
759 |         }
760 |       },
761 |       {},
762 |       'index_bundle.js'
763 |     );
764 |     config.entry = path.join(__dirname, 'fixtures/script1.js');
765 |     const expected = baseExpectations();
766 |     expected.html = [
767 |       /(<script (type="text\/javascript" )?src="index_bundle.js" customattribute="xyz"><\/script>)/,
768 |       /(<link rel="preload" href="index_bundle.js" as="script" customattribute="xyz"((>)|(\/>)|(><\/link>)))/
769 | 
770 |     ];
771 |     testPlugin(config, expected, done);
772 |   });
773 | });
774 | 


--------------------------------------------------------------------------------