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 !
webpack commonschunkplugin
asked Nov 21 '18 at 19:40
Agniva De SarkerAgniva De Sarker
454817
add a comment |
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 !
webpack commonschunkplugin
asked Nov 21 '18 at 19:40
Agniva De SarkerAgniva De Sarker
454817
add a comment |
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 !
webpack commonschunkplugin
asked Nov 21 '18 at 19:40
Agniva De SarkerAgniva De Sarker
454817
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
webpack commonschunkplugin
asked Nov 21 '18 at 19:40
Agniva De SarkerAgniva De Sarker
454817
asked Nov 21 '18 at 19:40
Agniva De SarkerAgniva De Sarker
454817
asked Nov 21 '18 at 19:40
Agniva De SarkerAgniva De Sarker
454817
asked Nov 21 '18 at 19:40
Agniva De SarkerAgniva De Sarker
454817
asked Nov 21 '18 at 19:40
Agniva De SarkerAgniva De Sarker
454817
454817
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
The one that injects those scripts to the HTML is the HTMLWebpackPlugin, you have 2 options:
- Use
excludeChunksoption to specify which chunks to ignore. - Use
chunksoption to specify what chunks to include.
answered Nov 21 '18 at 20:18
felixmoshfelixmosh
3,9062518
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
add a comment |
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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:
- Use
excludeChunksoption to specify which chunks to ignore. - Use
chunksoption to specify what chunks to include.
answered Nov 21 '18 at 20:18
felixmoshfelixmosh
3,9062518
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
add a comment |
0
The one that injects those scripts to the HTML is the HTMLWebpackPlugin, you have 2 options:
- Use
excludeChunksoption to specify which chunks to ignore. - Use
chunksoption to specify what chunks to include.
answered Nov 21 '18 at 20:18
felixmoshfelixmosh
3,9062518
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
add a comment |
0
0
0
The one that injects those scripts to the HTML is the HTMLWebpackPlugin, you have 2 options:
- Use
excludeChunksoption to specify which chunks to ignore. - Use
chunksoption to specify what chunks to include.
answered Nov 21 '18 at 20:18
felixmoshfelixmosh
3,9062518
The one that injects those scripts to the HTML is the HTMLWebpackPlugin, you have 2 options:
- Use
excludeChunksoption to specify which chunks to ignore. - Use
chunksoption to specify what chunks to include.
answered Nov 21 '18 at 20:18
felixmoshfelixmosh
3,9062518
answered Nov 21 '18 at 20:18
felixmoshfelixmosh
3,9062518
answered Nov 21 '18 at 20:18
felixmoshfelixmosh
3,9062518
answered Nov 21 '18 at 20:18
felixmoshfelixmosh
3,9062518
3,9062518
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
add a comment |
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
add a comment |
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
