Nine Project Managers

    webpack-plugin-inner-script

    1.3.0 • Public • Published

    inner script webpack plugin

    Basic

    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const WebpackPluginInnerScript = require('WebpackPluginInnerScript');
     
    module.exports = {
      entry: './index.js',
      output: {
        path: __dirname + '/dist',
        filename: 'index_bundle.js'
      },
      plugins: [
        new HtmlWebpackPlugin(),
        new WebpackPluginInnerScript()
      ]
    }
     
    normal
    <script type="text/javascript" src="index_bundle.js"></script>
     
    now
    <script type="text/javascript">
    var oHead = document.querySelector('body'),
        oScript = document.createElement('script');
    oScript.type = "text/javascript";
    oScript.src = "index_bundle.js";
    oHead.appendChild(oScript);
    </script>
     

    Params

    innerScript <true | false> default: true

    Used to set introversion

    include <RegExp | ""> default: ''

    Used to set match src of script

    attr

    Used to set the attributes of the script

    like:

    attr: {
      defer: "defer"
    }
    

    Example

    Only set attributes

    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const WebpackPluginInnerScript = require('WebpackPluginInnerScript');
     
    module.exports = {
      entry: './index.js',
      output: {
        path: __dirname + '/dist',
        filename: 'index_bundle.js'
      },
      plugins: [
        new HtmlWebpackPlugin(),
        new WebpackPluginInnerScript({
          innerScript: false,
          attr: {
            async: "async"
          }
        })
      ]
    }
     
    normal
    <script type="text/javascript" src="index_bundle.js"></script>
     
    now
    <script type="text/javascript" src="index_bundle.js" async="async"></script>
     

    Both set attributes and innerScript

    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const WebpackPluginInnerScript = require('WebpackPluginInnerScript');
     
    module.exports = {
      entry: './index.js',
      output: {
        path: __dirname + '/dist',
        filename: 'index_bundle.js'
      },
      plugins: [
        new HtmlWebpackPlugin(),
        new WebpackPluginInnerScript({
          innerScript: true,
          attr: {
            async: "async"
          }
        })
      ]
    }
     
    normal
    <script type="text/javascript" src="index_bundle.js"></script>
     
    now
    <script type="text/javascript">
    var oBody = document.querySelector('body'),
    oScript = document.createElement('script');
    oScript.type = "text/javascript";
    oScript.src = "index_bundle.js";
    oScript.async = "async";
    oBody.appendChild(oScript);
    </script>
     

    let the file containing the 'index'

    plugins: [
      new HtmlWebpackPlugin(),
      new WebpackPluginInnerScript({
        innerScript: true,
        include: [/index/],
        attr: {
          async: "async"
        }
      })
    ]
     
    normal
    <script type="text/javascript" src="index_bundle.js"></script>
    <script type="text/javascript" src="cc_bundle.js"></script>
     
    now
    <script type="text/javascript">
    var oBody = document.querySelector('body'),
    oScript = document.createElement('script');
    oScript.type = "text/javascript";
    oScript.src = "index_bundle.js";
    oScript.async = "async";
    oBody.appendChild(oScript);
    </script>
    <script type="text/javascript" src="cc_bundle.js"></script>

    Install

    npm i webpack-plugin-inner-script

    DownloadsWeekly Downloads

    6

    Version

    1.3.0

    License

    ISC

    Unpacked Size

    8.98 kB

    Total Files

    8

    Last publish

    Collaborators

    • hua1995116