Mixing
Using webpack-chain with vue-cli 3 to change the name of the generated file
I want to change the name of the generated file from app.<hash>.js to plugin.<hash>.js. The name of the webpack entry point key is used to determine the name. The vue-cli 3 uses app by default as webpack entry point key. So I need to change it. Using vue inspect > webpack.config.resolved.js I'm able to see the whole webpack file that gets resolved by vue-cli.
The last part of the resolved webpack file is.
}
...
entry: {
app: [
'./src/main.js'
]
}
I can overrule the value by adding with the following to vue.config.js.
module.exports = {
chainWebpack: config => {
// Remove the old entry and add the new one
config
.entry('app')
.clear()
.add('./plugin/index.js')
},
...
}
This is the result in the resolved webpack file.
{
...
entry: {
app: [
'./plugin/index.js'
]
}
}
I also want to rename the app key to plugin. I thought I would be able to delete the key using config.entry.delete('app'), but this throws an error.
This is were I am stuck. Anyone have suggestions to delete or rename the entry key?
webpack vue-cli-3
asked Nov 18 '18 at 20:07
nidkil
332314
add a comment |
I want to change the name of the generated file from app.<hash>.js to plugin.<hash>.js. The name of the webpack entry point key is used to determine the name. The vue-cli 3 uses app by default as webpack entry point key. So I need to change it. Using vue inspect > webpack.config.resolved.js I'm able to see the whole webpack file that gets resolved by vue-cli.
The last part of the resolved webpack file is.
}
...
entry: {
app: [
'./src/main.js'
]
}
I can overrule the value by adding with the following to vue.config.js.
module.exports = {
chainWebpack: config => {
// Remove the old entry and add the new one
config
.entry('app')
.clear()
.add('./plugin/index.js')
},
...
}
This is the result in the resolved webpack file.
{
...
entry: {
app: [
'./plugin/index.js'
]
}
}
I also want to rename the app key to plugin. I thought I would be able to delete the key using config.entry.delete('app'), but this throws an error.
This is were I am stuck. Anyone have suggestions to delete or rename the entry key?
webpack vue-cli-3
asked Nov 18 '18 at 20:07
nidkil
332314
add a comment |
I want to change the name of the generated file from app.<hash>.js to plugin.<hash>.js. The name of the webpack entry point key is used to determine the name. The vue-cli 3 uses app by default as webpack entry point key. So I need to change it. Using vue inspect > webpack.config.resolved.js I'm able to see the whole webpack file that gets resolved by vue-cli.
The last part of the resolved webpack file is.
}
...
entry: {
app: [
'./src/main.js'
]
}
I can overrule the value by adding with the following to vue.config.js.
module.exports = {
chainWebpack: config => {
// Remove the old entry and add the new one
config
.entry('app')
.clear()
.add('./plugin/index.js')
},
...
}
This is the result in the resolved webpack file.
{
...
entry: {
app: [
'./plugin/index.js'
]
}
}
I also want to rename the app key to plugin. I thought I would be able to delete the key using config.entry.delete('app'), but this throws an error.
This is were I am stuck. Anyone have suggestions to delete or rename the entry key?
webpack vue-cli-3
asked Nov 18 '18 at 20:07
nidkil
332314
I want to change the name of the generated file from app.<hash>.js to plugin.<hash>.js. The name of the webpack entry point key is used to determine the name. The vue-cli 3 uses app by default as webpack entry point key. So I need to change it. Using vue inspect > webpack.config.resolved.js I'm able to see the whole webpack file that gets resolved by vue-cli.
The last part of the resolved webpack file is.
}
...
entry: {
app: [
'./src/main.js'
]
}
I can overrule the value by adding with the following to vue.config.js.
module.exports = {
chainWebpack: config => {
// Remove the old entry and add the new one
config
.entry('app')
.clear()
.add('./plugin/index.js')
},
...
}
This is the result in the resolved webpack file.
{
...
entry: {
app: [
'./plugin/index.js'
]
}
}
I also want to rename the app key to plugin. I thought I would be able to delete the key using config.entry.delete('app'), but this throws an error.
This is were I am stuck. Anyone have suggestions to delete or rename the entry key?
webpack vue-cli-3
webpack vue-cli-3
asked Nov 18 '18 at 20:07
nidkil
332314
asked Nov 18 '18 at 20:07
nidkil
332314
edited Nov 19 '18 at 13:32
asked Nov 18 '18 at 20:07
nidkil
332314
asked Nov 18 '18 at 20:07
nidkil
332314
asked Nov 18 '18 at 20:07
nidkil
332314
332314
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Okay I figured it out. You have to use the low-level config.entryPoints instead of config.entry.
module.exports = {
chainWebpack: config => {
// Remove the old 'app' entry
config
.entryPoints
.delete('app')
// Add the new 'plugin' entry
config
.entry('plugin')
.add('./plugin/index.js')
config
.resolve
.alias
.set('@', path.resolve(__dirname, 'plugin'))
},
...
}
If you want to make this change you have to take the following steps:
- Rename the
srcdirectory toplugin(optional, but I like it) - Add the
vue.config.jsfile with the code above including adjusting the alias fromsrctoplugin
Update the
moduleNameMapperin thejest.config.js
...
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/plugin/$1'
},
...
That will do the trick. Now the generated file is called plugin.<hash>.js.
answered Nov 19 '18 at 12:49
nidkil
332314
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%2f53364957%2fusing-webpack-chain-with-vue-cli-3-to-change-the-name-of-the-generated-file%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
Okay I figured it out. You have to use the low-level config.entryPoints instead of config.entry.
module.exports = {
chainWebpack: config => {
// Remove the old 'app' entry
config
.entryPoints
.delete('app')
// Add the new 'plugin' entry
config
.entry('plugin')
.add('./plugin/index.js')
config
.resolve
.alias
.set('@', path.resolve(__dirname, 'plugin'))
},
...
}
If you want to make this change you have to take the following steps:
- Rename the
srcdirectory toplugin(optional, but I like it) - Add the
vue.config.jsfile with the code above including adjusting the alias fromsrctoplugin
Update the
moduleNameMapperin thejest.config.js
...
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/plugin/$1'
},
...
That will do the trick. Now the generated file is called plugin.<hash>.js.
answered Nov 19 '18 at 12:49
nidkil
332314
add a comment |
Okay I figured it out. You have to use the low-level config.entryPoints instead of config.entry.
module.exports = {
chainWebpack: config => {
// Remove the old 'app' entry
config
.entryPoints
.delete('app')
// Add the new 'plugin' entry
config
.entry('plugin')
.add('./plugin/index.js')
config
.resolve
.alias
.set('@', path.resolve(__dirname, 'plugin'))
},
...
}
If you want to make this change you have to take the following steps:
- Rename the
srcdirectory toplugin(optional, but I like it) - Add the
vue.config.jsfile with the code above including adjusting the alias fromsrctoplugin
Update the
moduleNameMapperin thejest.config.js
...
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/plugin/$1'
},
...
That will do the trick. Now the generated file is called plugin.<hash>.js.
answered Nov 19 '18 at 12:49
nidkil
332314
add a comment |
Okay I figured it out. You have to use the low-level config.entryPoints instead of config.entry.
module.exports = {
chainWebpack: config => {
// Remove the old 'app' entry
config
.entryPoints
.delete('app')
// Add the new 'plugin' entry
config
.entry('plugin')
.add('./plugin/index.js')
config
.resolve
.alias
.set('@', path.resolve(__dirname, 'plugin'))
},
...
}
If you want to make this change you have to take the following steps:
- Rename the
srcdirectory toplugin(optional, but I like it) - Add the
vue.config.jsfile with the code above including adjusting the alias fromsrctoplugin
Update the
moduleNameMapperin thejest.config.js
...
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/plugin/$1'
},
...
That will do the trick. Now the generated file is called plugin.<hash>.js.
answered Nov 19 '18 at 12:49
nidkil
332314
Okay I figured it out. You have to use the low-level config.entryPoints instead of config.entry.
module.exports = {
chainWebpack: config => {
// Remove the old 'app' entry
config
.entryPoints
.delete('app')
// Add the new 'plugin' entry
config
.entry('plugin')
.add('./plugin/index.js')
config
.resolve
.alias
.set('@', path.resolve(__dirname, 'plugin'))
},
...
}
If you want to make this change you have to take the following steps:
- Rename the
srcdirectory toplugin(optional, but I like it) - Add the
vue.config.jsfile with the code above including adjusting the alias fromsrctoplugin
Update the
moduleNameMapperin thejest.config.js
...
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/plugin/$1'
},
...
That will do the trick. Now the generated file is called plugin.<hash>.js.
answered Nov 19 '18 at 12:49
nidkil
332314
edited Nov 19 '18 at 13:29
answered Nov 19 '18 at 12:49
nidkil
332314
answered Nov 19 '18 at 12:49
nidkil
332314
answered Nov 19 '18 at 12:49
nidkil
332314
332314
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53364957%2fusing-webpack-chain-with-vue-cli-3-to-change-the-name-of-the-generated-file%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
