How to prevent commonsChunkPlugin from injecting the chunks into html












1















I am using preload-webpack-plugin along with the commonschunkplugin for webpack. My webpack version is 3.



Now the issue is that using the preloadplugin, I am already prefetching the async routes in my vue application. But since commonschunkplugin is also used, after page load, it also injects tags like this -



<script type="text/javascript" charset="utf-8" async="" src="/static/js/3.3c5729583b9ce21e8fd8.js"></script>


So, as a result, the page becomes like this -



<link rel="prefetch" href="/static/js/0.806cdda5777e81bb1a8b.js">
<link rel="prefetch" href="/static/js/1.95cf2f4474949209d50b.js">
<link rel="prefetch" href="/static/js/2.5231ce0aada93adb0dd7.js">
<link rel="prefetch" href="/static/js/3.6eef2cb918c01f721e28.js">
<link rel="prefetch" href="/static/js/4.228c75e21459a43cb71c.js">
<script type="text/javascript" charset="utf-8" async="" src="/static/js/0.806cdda5777e81bb1a8b.js"></script>
<script type="text/javascript" charset="utf-8" async="" src="/static/js/4.228c75e21459a43cb71c.js"></script>


I don't want those last 2 script tags to be inserted, because I am already prefetching them.



This is my relavant webpack config -






new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
}),
// preloading assets
new PreloadWebpackPlugin({
rel: 'prefetch'
}),
// keep module.id stable when vendor modules does not change
new webpack.HashedModuleIdsPlugin(),
// enable scope hoisting
new webpack.optimize.ModuleConcatenationPlugin(),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
}),





I had this working in a previous project. But somehow I can't figure out why in this project, these async tags keep getting injected. I have matched the same webpack version, tried all sorts of config variations but nothing has worked.



Any sort of help on this would be appreciated !










share|improve this question



























    1















    I am using preload-webpack-plugin along with the commonschunkplugin for webpack. My webpack version is 3.



    Now the issue is that using the preloadplugin, I am already prefetching the async routes in my vue application. But since commonschunkplugin is also used, after page load, it also injects tags like this -



    <script type="text/javascript" charset="utf-8" async="" src="/static/js/3.3c5729583b9ce21e8fd8.js"></script>


    So, as a result, the page becomes like this -



    <link rel="prefetch" href="/static/js/0.806cdda5777e81bb1a8b.js">
    <link rel="prefetch" href="/static/js/1.95cf2f4474949209d50b.js">
    <link rel="prefetch" href="/static/js/2.5231ce0aada93adb0dd7.js">
    <link rel="prefetch" href="/static/js/3.6eef2cb918c01f721e28.js">
    <link rel="prefetch" href="/static/js/4.228c75e21459a43cb71c.js">
    <script type="text/javascript" charset="utf-8" async="" src="/static/js/0.806cdda5777e81bb1a8b.js"></script>
    <script type="text/javascript" charset="utf-8" async="" src="/static/js/4.228c75e21459a43cb71c.js"></script>


    I don't want those last 2 script tags to be inserted, because I am already prefetching them.



    This is my relavant webpack config -






    new HtmlWebpackPlugin({
    filename: config.build.index,
    template: 'index.html',
    inject: true,
    minify: {
    removeComments: true,
    collapseWhitespace: true,
    removeAttributeQuotes: true
    // more options:
    // https://github.com/kangax/html-minifier#options-quick-reference
    },
    // necessary to consistently work with multiple chunks via CommonsChunkPlugin
    chunksSortMode: 'dependency'
    }),
    // preloading assets
    new PreloadWebpackPlugin({
    rel: 'prefetch'
    }),
    // keep module.id stable when vendor modules does not change
    new webpack.HashedModuleIdsPlugin(),
    // enable scope hoisting
    new webpack.optimize.ModuleConcatenationPlugin(),
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor',
    minChunks (module) {
    // any required modules inside node_modules are extracted to vendor
    return (
    module.resource &&
    /.js$/.test(module.resource) &&
    module.resource.indexOf(
    path.join(__dirname, '../node_modules')
    ) === 0
    )
    }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
    name: 'manifest',
    minChunks: Infinity
    }),
    // This instance extracts shared chunks from code splitted chunks and bundles them
    // in a separate chunk, similar to the vendor chunk
    // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
    new webpack.optimize.CommonsChunkPlugin({
    name: 'app',
    async: 'vendor-async',
    children: true,
    minChunks: 3
    }),





    I had this working in a previous project. But somehow I can't figure out why in this project, these async tags keep getting injected. I have matched the same webpack version, tried all sorts of config variations but nothing has worked.



    Any sort of help on this would be appreciated !










    share|improve this question

























      1












      1








      1








      I am using preload-webpack-plugin along with the commonschunkplugin for webpack. My webpack version is 3.



      Now the issue is that using the preloadplugin, I am already prefetching the async routes in my vue application. But since commonschunkplugin is also used, after page load, it also injects tags like this -



      <script type="text/javascript" charset="utf-8" async="" src="/static/js/3.3c5729583b9ce21e8fd8.js"></script>


      So, as a result, the page becomes like this -



      <link rel="prefetch" href="/static/js/0.806cdda5777e81bb1a8b.js">
      <link rel="prefetch" href="/static/js/1.95cf2f4474949209d50b.js">
      <link rel="prefetch" href="/static/js/2.5231ce0aada93adb0dd7.js">
      <link rel="prefetch" href="/static/js/3.6eef2cb918c01f721e28.js">
      <link rel="prefetch" href="/static/js/4.228c75e21459a43cb71c.js">
      <script type="text/javascript" charset="utf-8" async="" src="/static/js/0.806cdda5777e81bb1a8b.js"></script>
      <script type="text/javascript" charset="utf-8" async="" src="/static/js/4.228c75e21459a43cb71c.js"></script>


      I don't want those last 2 script tags to be inserted, because I am already prefetching them.



      This is my relavant webpack config -






      new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
      // more options:
      // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
      }),
      // preloading assets
      new PreloadWebpackPlugin({
      rel: 'prefetch'
      }),
      // keep module.id stable when vendor modules does not change
      new webpack.HashedModuleIdsPlugin(),
      // enable scope hoisting
      new webpack.optimize.ModuleConcatenationPlugin(),
      // split vendor js into its own file
      new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks (module) {
      // any required modules inside node_modules are extracted to vendor
      return (
      module.resource &&
      /.js$/.test(module.resource) &&
      module.resource.indexOf(
      path.join(__dirname, '../node_modules')
      ) === 0
      )
      }
      }),
      // extract webpack runtime and module manifest to its own file in order to
      // prevent vendor hash from being updated whenever app bundle is updated
      new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
      }),
      // This instance extracts shared chunks from code splitted chunks and bundles them
      // in a separate chunk, similar to the vendor chunk
      // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
      new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3
      }),





      I had this working in a previous project. But somehow I can't figure out why in this project, these async tags keep getting injected. I have matched the same webpack version, tried all sorts of config variations but nothing has worked.



      Any sort of help on this would be appreciated !










      share|improve this question














      I am using preload-webpack-plugin along with the commonschunkplugin for webpack. My webpack version is 3.



      Now the issue is that using the preloadplugin, I am already prefetching the async routes in my vue application. But since commonschunkplugin is also used, after page load, it also injects tags like this -



      <script type="text/javascript" charset="utf-8" async="" src="/static/js/3.3c5729583b9ce21e8fd8.js"></script>


      So, as a result, the page becomes like this -



      <link rel="prefetch" href="/static/js/0.806cdda5777e81bb1a8b.js">
      <link rel="prefetch" href="/static/js/1.95cf2f4474949209d50b.js">
      <link rel="prefetch" href="/static/js/2.5231ce0aada93adb0dd7.js">
      <link rel="prefetch" href="/static/js/3.6eef2cb918c01f721e28.js">
      <link rel="prefetch" href="/static/js/4.228c75e21459a43cb71c.js">
      <script type="text/javascript" charset="utf-8" async="" src="/static/js/0.806cdda5777e81bb1a8b.js"></script>
      <script type="text/javascript" charset="utf-8" async="" src="/static/js/4.228c75e21459a43cb71c.js"></script>


      I don't want those last 2 script tags to be inserted, because I am already prefetching them.



      This is my relavant webpack config -






      new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
      // more options:
      // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
      }),
      // preloading assets
      new PreloadWebpackPlugin({
      rel: 'prefetch'
      }),
      // keep module.id stable when vendor modules does not change
      new webpack.HashedModuleIdsPlugin(),
      // enable scope hoisting
      new webpack.optimize.ModuleConcatenationPlugin(),
      // split vendor js into its own file
      new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks (module) {
      // any required modules inside node_modules are extracted to vendor
      return (
      module.resource &&
      /.js$/.test(module.resource) &&
      module.resource.indexOf(
      path.join(__dirname, '../node_modules')
      ) === 0
      )
      }
      }),
      // extract webpack runtime and module manifest to its own file in order to
      // prevent vendor hash from being updated whenever app bundle is updated
      new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
      }),
      // This instance extracts shared chunks from code splitted chunks and bundles them
      // in a separate chunk, similar to the vendor chunk
      // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
      new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3
      }),





      I had this working in a previous project. But somehow I can't figure out why in this project, these async tags keep getting injected. I have matched the same webpack version, tried all sorts of config variations but nothing has worked.



      Any sort of help on this would be appreciated !






      new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
      // more options:
      // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
      }),
      // preloading assets
      new PreloadWebpackPlugin({
      rel: 'prefetch'
      }),
      // keep module.id stable when vendor modules does not change
      new webpack.HashedModuleIdsPlugin(),
      // enable scope hoisting
      new webpack.optimize.ModuleConcatenationPlugin(),
      // split vendor js into its own file
      new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks (module) {
      // any required modules inside node_modules are extracted to vendor
      return (
      module.resource &&
      /.js$/.test(module.resource) &&
      module.resource.indexOf(
      path.join(__dirname, '../node_modules')
      ) === 0
      )
      }
      }),
      // extract webpack runtime and module manifest to its own file in order to
      // prevent vendor hash from being updated whenever app bundle is updated
      new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
      }),
      // This instance extracts shared chunks from code splitted chunks and bundles them
      // in a separate chunk, similar to the vendor chunk
      // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
      new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3
      }),





      new HtmlWebpackPlugin({
      filename: config.build.index,
      template: 'index.html',
      inject: true,
      minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true
      // more options:
      // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency'
      }),
      // preloading assets
      new PreloadWebpackPlugin({
      rel: 'prefetch'
      }),
      // keep module.id stable when vendor modules does not change
      new webpack.HashedModuleIdsPlugin(),
      // enable scope hoisting
      new webpack.optimize.ModuleConcatenationPlugin(),
      // split vendor js into its own file
      new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks (module) {
      // any required modules inside node_modules are extracted to vendor
      return (
      module.resource &&
      /.js$/.test(module.resource) &&
      module.resource.indexOf(
      path.join(__dirname, '../node_modules')
      ) === 0
      )
      }
      }),
      // extract webpack runtime and module manifest to its own file in order to
      // prevent vendor hash from being updated whenever app bundle is updated
      new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      minChunks: Infinity
      }),
      // This instance extracts shared chunks from code splitted chunks and bundles them
      // in a separate chunk, similar to the vendor chunk
      // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
      new webpack.optimize.CommonsChunkPlugin({
      name: 'app',
      async: 'vendor-async',
      children: true,
      minChunks: 3
      }),






      webpack commonschunkplugin






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 21 '18 at 19:40









      Agniva De SarkerAgniva De Sarker

      454818




      454818
























          1 Answer
          1






          active

          oldest

          votes


















          0














          The one that injects those scripts to the HTML is the HTMLWebpackPlugin, you have 2 options:




          1. Use excludeChunks option to specify which chunks to ignore.

          2. Use chunks option to specify what chunks to include.






          share|improve this answer
























          • Ah you are right. That works. But now if I change the HTMLWebpackPlugin not to inject those chunks, my app doesn't work :( I swear this worked earlier in my last project. Can't seem to figure out what is different now.

            – Agniva De Sarker
            Nov 22 '18 at 4:07













          • How those chunks created? using code splitting?

            – felixmosh
            Nov 22 '18 at 6:19











          • Yes. Through async route loading in vuejs.

            – Agniva De Sarker
            Nov 22 '18 at 9:18











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419432%2fhow-to-prevent-commonschunkplugin-from-injecting-the-chunks-into-html%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          0














          The one that injects those scripts to the HTML is the HTMLWebpackPlugin, you have 2 options:




          1. Use excludeChunks option to specify which chunks to ignore.

          2. Use chunks option to specify what chunks to include.






          share|improve this answer
























          • Ah you are right. That works. But now if I change the HTMLWebpackPlugin not to inject those chunks, my app doesn't work :( I swear this worked earlier in my last project. Can't seem to figure out what is different now.

            – Agniva De Sarker
            Nov 22 '18 at 4:07













          • How those chunks created? using code splitting?

            – felixmosh
            Nov 22 '18 at 6:19











          • Yes. Through async route loading in vuejs.

            – Agniva De Sarker
            Nov 22 '18 at 9:18
















          0














          The one that injects those scripts to the HTML is the HTMLWebpackPlugin, you have 2 options:




          1. Use excludeChunks option to specify which chunks to ignore.

          2. Use chunks option to specify what chunks to include.






          share|improve this answer
























          • Ah you are right. That works. But now if I change the HTMLWebpackPlugin not to inject those chunks, my app doesn't work :( I swear this worked earlier in my last project. Can't seem to figure out what is different now.

            – Agniva De Sarker
            Nov 22 '18 at 4:07













          • How those chunks created? using code splitting?

            – felixmosh
            Nov 22 '18 at 6:19











          • Yes. Through async route loading in vuejs.

            – Agniva De Sarker
            Nov 22 '18 at 9:18














          0












          0








          0







          The one that injects those scripts to the HTML is the HTMLWebpackPlugin, you have 2 options:




          1. Use excludeChunks option to specify which chunks to ignore.

          2. Use chunks option to specify what chunks to include.






          share|improve this answer













          The one that injects those scripts to the HTML is the HTMLWebpackPlugin, you have 2 options:




          1. Use excludeChunks option to specify which chunks to ignore.

          2. Use chunks option to specify what chunks to include.







          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 21 '18 at 20:18









          felixmoshfelixmosh

          4,1112621




          4,1112621













          • Ah you are right. That works. But now if I change the HTMLWebpackPlugin not to inject those chunks, my app doesn't work :( I swear this worked earlier in my last project. Can't seem to figure out what is different now.

            – Agniva De Sarker
            Nov 22 '18 at 4:07













          • How those chunks created? using code splitting?

            – felixmosh
            Nov 22 '18 at 6:19











          • Yes. Through async route loading in vuejs.

            – Agniva De Sarker
            Nov 22 '18 at 9:18



















          • Ah you are right. That works. But now if I change the HTMLWebpackPlugin not to inject those chunks, my app doesn't work :( I swear this worked earlier in my last project. Can't seem to figure out what is different now.

            – Agniva De Sarker
            Nov 22 '18 at 4:07













          • How those chunks created? using code splitting?

            – felixmosh
            Nov 22 '18 at 6:19











          • Yes. Through async route loading in vuejs.

            – Agniva De Sarker
            Nov 22 '18 at 9:18

















          Ah you are right. That works. But now if I change the HTMLWebpackPlugin not to inject those chunks, my app doesn't work :( I swear this worked earlier in my last project. Can't seem to figure out what is different now.

          – Agniva De Sarker
          Nov 22 '18 at 4:07







          Ah you are right. That works. But now if I change the HTMLWebpackPlugin not to inject those chunks, my app doesn't work :( I swear this worked earlier in my last project. Can't seem to figure out what is different now.

          – Agniva De Sarker
          Nov 22 '18 at 4:07















          How those chunks created? using code splitting?

          – felixmosh
          Nov 22 '18 at 6:19





          How those chunks created? using code splitting?

          – felixmosh
          Nov 22 '18 at 6:19













          Yes. Through async route loading in vuejs.

          – Agniva De Sarker
          Nov 22 '18 at 9:18





          Yes. Through async route loading in vuejs.

          – Agniva De Sarker
          Nov 22 '18 at 9:18




















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419432%2fhow-to-prevent-commonschunkplugin-from-injecting-the-chunks-into-html%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          這個網誌中的熱門文章

          Xamarin.form Move up view when keyboard appear

          Post-Redirect-Get with Spring WebFlux and Thymeleaf

          Anylogic : not able to use stopDelay()