webpack 4 exports are not being exposed as configured
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
I am upgrading from Webpack 3 to 4.
All of my web pages effectively have 2 entry points: one that is shared across all pages and another one that is page specific.
I thought I had gotten everything to work with webpack 4, but it looked like some of my modules were executing twice; it turns out that each entry point bootstrapped a module, even if the module was in a shared js file.
The solution appeared to be to set optimization.runtimeChunk = "single", which would tell webpack to share the runtime across all chunks.
Looking at the output of the js files, this looked work as expected; however, each of my entry points exposes its exports via the following configuration:
output: {... libraryTarget: "var", libarary: ["MyLibrary", "[name]"]}
When I load the webpage and try to access the exported objects/functions, I get an error, when I try the following:
MyLibrary["entry"]
where "entry" is the name of one of the entry points, the result is a number (instead of the expected object where the members are the various named exports).
If I remove the optimization.runtimeChunk = "single" setting, then MyLibrary["entry"] returns the expected object with my exports, but then I have the same problem of my modules potentially being boot strapped multiple times.
webpack-4
add a comment |
I am upgrading from Webpack 3 to 4.
All of my web pages effectively have 2 entry points: one that is shared across all pages and another one that is page specific.
I thought I had gotten everything to work with webpack 4, but it looked like some of my modules were executing twice; it turns out that each entry point bootstrapped a module, even if the module was in a shared js file.
The solution appeared to be to set optimization.runtimeChunk = "single", which would tell webpack to share the runtime across all chunks.
Looking at the output of the js files, this looked work as expected; however, each of my entry points exposes its exports via the following configuration:
output: {... libraryTarget: "var", libarary: ["MyLibrary", "[name]"]}
When I load the webpage and try to access the exported objects/functions, I get an error, when I try the following:
MyLibrary["entry"]
where "entry" is the name of one of the entry points, the result is a number (instead of the expected object where the members are the various named exports).
If I remove the optimization.runtimeChunk = "single" setting, then MyLibrary["entry"] returns the expected object with my exports, but then I have the same problem of my modules potentially being boot strapped multiple times.
webpack-4
add a comment |
I am upgrading from Webpack 3 to 4.
All of my web pages effectively have 2 entry points: one that is shared across all pages and another one that is page specific.
I thought I had gotten everything to work with webpack 4, but it looked like some of my modules were executing twice; it turns out that each entry point bootstrapped a module, even if the module was in a shared js file.
The solution appeared to be to set optimization.runtimeChunk = "single", which would tell webpack to share the runtime across all chunks.
Looking at the output of the js files, this looked work as expected; however, each of my entry points exposes its exports via the following configuration:
output: {... libraryTarget: "var", libarary: ["MyLibrary", "[name]"]}
When I load the webpage and try to access the exported objects/functions, I get an error, when I try the following:
MyLibrary["entry"]
where "entry" is the name of one of the entry points, the result is a number (instead of the expected object where the members are the various named exports).
If I remove the optimization.runtimeChunk = "single" setting, then MyLibrary["entry"] returns the expected object with my exports, but then I have the same problem of my modules potentially being boot strapped multiple times.
webpack-4
I am upgrading from Webpack 3 to 4.
All of my web pages effectively have 2 entry points: one that is shared across all pages and another one that is page specific.
I thought I had gotten everything to work with webpack 4, but it looked like some of my modules were executing twice; it turns out that each entry point bootstrapped a module, even if the module was in a shared js file.
The solution appeared to be to set optimization.runtimeChunk = "single", which would tell webpack to share the runtime across all chunks.
Looking at the output of the js files, this looked work as expected; however, each of my entry points exposes its exports via the following configuration:
output: {... libraryTarget: "var", libarary: ["MyLibrary", "[name]"]}
When I load the webpage and try to access the exported objects/functions, I get an error, when I try the following:
MyLibrary["entry"]
where "entry" is the name of one of the entry points, the result is a number (instead of the expected object where the members are the various named exports).
If I remove the optimization.runtimeChunk = "single" setting, then MyLibrary["entry"] returns the expected object with my exports, but then I have the same problem of my modules potentially being boot strapped multiple times.
webpack-4
webpack-4
asked Nov 16 '18 at 18:24
Brian BallBrian Ball
9,16912741
9,16912741
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
I figured it out.
When you specify optimization.runtimeChunk = "single", it outputs a file called runtime.js. That file must be included in the web page in order for webpack to function. Once I included that file, everything started working as expected.
Pro tip:
optimization.runtimeChunk = "single" is a shortcut for:
optimization : {
runtimeChunk: {
name: 'runtime'
}
}
If you rename "runtime" to be the same as another chunk, it will include the runtime code bits in that chunk.
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
});
}
});
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%2f53343432%2fwebpack-4-exports-are-not-being-exposed-as-configured%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
I figured it out.
When you specify optimization.runtimeChunk = "single", it outputs a file called runtime.js. That file must be included in the web page in order for webpack to function. Once I included that file, everything started working as expected.
Pro tip:
optimization.runtimeChunk = "single" is a shortcut for:
optimization : {
runtimeChunk: {
name: 'runtime'
}
}
If you rename "runtime" to be the same as another chunk, it will include the runtime code bits in that chunk.
add a comment |
I figured it out.
When you specify optimization.runtimeChunk = "single", it outputs a file called runtime.js. That file must be included in the web page in order for webpack to function. Once I included that file, everything started working as expected.
Pro tip:
optimization.runtimeChunk = "single" is a shortcut for:
optimization : {
runtimeChunk: {
name: 'runtime'
}
}
If you rename "runtime" to be the same as another chunk, it will include the runtime code bits in that chunk.
add a comment |
I figured it out.
When you specify optimization.runtimeChunk = "single", it outputs a file called runtime.js. That file must be included in the web page in order for webpack to function. Once I included that file, everything started working as expected.
Pro tip:
optimization.runtimeChunk = "single" is a shortcut for:
optimization : {
runtimeChunk: {
name: 'runtime'
}
}
If you rename "runtime" to be the same as another chunk, it will include the runtime code bits in that chunk.
I figured it out.
When you specify optimization.runtimeChunk = "single", it outputs a file called runtime.js. That file must be included in the web page in order for webpack to function. Once I included that file, everything started working as expected.
Pro tip:
optimization.runtimeChunk = "single" is a shortcut for:
optimization : {
runtimeChunk: {
name: 'runtime'
}
}
If you rename "runtime" to be the same as another chunk, it will include the runtime code bits in that chunk.
answered Nov 16 '18 at 19:48
Brian BallBrian Ball
9,16912741
9,16912741
add a comment |
add a comment |
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.
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%2f53343432%2fwebpack-4-exports-are-not-being-exposed-as-configured%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