Guide
Config
Plugin
API
Community
Guide
Config
Plugin
API
Community

output.inlineScripts

  • Type:
type InlineScripts =
  | boolean
  | RegExp
  | ((params: { size: number; name: string }) => boolean);
  • Default: false

Whether to inline output scripts files (.js files) into HTML with <script> tags in production mode.

Note that, with this option on, the scripts files will no longer be written in dist directory, they will only exist inside the HTML file instead.

Example

By default, we have following output files:

dist/html/main/index.html
dist/static/css/style.css
dist/static/js/main.js

After turn on the output.inlineScripts option:

export default {
  output: {
    inlineScripts: true,
  },
};

The output files will become:

dist/html/main/index.html
dist/static/css/style.css

And dist/static/js/main.js will be inlined in index.html:

<html>
  <head>
    <script>
      // content of dist/static/js/main.js
    </script>
  </head>
</html>

Script Tag Position

When output.inlineScripts is used, it is recommended to set html.inject to 'body'.

As the default injection position of the script tag is the <head> tag, changing the injection position to the <body> tag can ensure that the inlined script can access the DOM elements in <body>.

export default {
+  html: {
+    inject: 'body',
+  },
   output: {
     inlineScripts: true,
   },
};

Using RegExp

If you need to inline part of the JS files, you can set inlineScripts to a regular expression that matches the URL of the JS file that needs to be inlined.

For example, to inline main.js into HTML, you can add the following configuration:

export default {
  output: {
    inlineScripts: /[\\/]main\.\w+\.js$/,
  },
};
TIP

The production filename includes a hash value by default, such as static/js/main.18a568e5.js. Therefore, in regular expressions, \w+ is used to match the hash.

Using Function

You can also set output.inlineScripts to a function that accepts the following parameters:

  • name: The filename, such as static/js/main.18a568e5.js.
  • size: The file size in bytes.

For example, if we want to inline assets that are smaller than 10kB, we can add the following configuration:

export default {
  output: {
    inlineScripts({ size }) {
      return size < 10 * 1000;
    },
  },
};