Unable to re-assign variable in webpack plugin using parser hook
I'm trying to re-assign a variable in a specific file dynamically based on passed in build arguments but I'm having trouble understanding the plugin documentation and figuring out where the place for me to wire this in would be.
The ideal scenario would be to be able to pass a file name, variable name, and variable value to the plugin (for brevity I've left out the constructor to take in these arguments), and then override/re-assign them in the given file.
I.e. Index.ts would have let myVariable = false;
, and I'd like to flip this to true based on passed in parameters to webpack.
With the below code, I can use the parser to find the variable, but I can't seem to change it. I've tried statement.declarations[0].init.raw = "true"
and statement.declarations[0].init.value = true
, but the output index.js file still has the original false value.
Am I trying to do this in the wrong part of the webpack process, or do I need to be using a different hook? Any guidance on how or where I could do this would be really helpful. Thanks.
class MyPlugin {
apply(compiler) {
compiler.hooks.beforeCompile.
tap('MyPlugin', ({ normalModuleFactory }) => {
normalModuleFactory.hooks.parser.
for("javascript/auto").
tap("MyPlugin", handler);
normalModuleFactory.hooks.parser.
for("javascript/dynamic").
tap("MyPlugin", handler);
normalModuleFactory.hooks.parser.
for("javascript/esm").
tap("MyPlugin", handler);
});
function handler(parser, options) {
parser.hooks.statement.tap('MyPlugin', (statement) => {
const module = parser.state.module;
if (module.resource
&& module.resource.endsWith('index.ts')
&& statement.type === 'VariableDeclaration'
&& statement.declarations[0].id.name === 'myVariable') {
// Do something here??
}
});
}
}
}
module.exports = MyPlugin;
webpack-4 webpack-plugin
add a comment |
I'm trying to re-assign a variable in a specific file dynamically based on passed in build arguments but I'm having trouble understanding the plugin documentation and figuring out where the place for me to wire this in would be.
The ideal scenario would be to be able to pass a file name, variable name, and variable value to the plugin (for brevity I've left out the constructor to take in these arguments), and then override/re-assign them in the given file.
I.e. Index.ts would have let myVariable = false;
, and I'd like to flip this to true based on passed in parameters to webpack.
With the below code, I can use the parser to find the variable, but I can't seem to change it. I've tried statement.declarations[0].init.raw = "true"
and statement.declarations[0].init.value = true
, but the output index.js file still has the original false value.
Am I trying to do this in the wrong part of the webpack process, or do I need to be using a different hook? Any guidance on how or where I could do this would be really helpful. Thanks.
class MyPlugin {
apply(compiler) {
compiler.hooks.beforeCompile.
tap('MyPlugin', ({ normalModuleFactory }) => {
normalModuleFactory.hooks.parser.
for("javascript/auto").
tap("MyPlugin", handler);
normalModuleFactory.hooks.parser.
for("javascript/dynamic").
tap("MyPlugin", handler);
normalModuleFactory.hooks.parser.
for("javascript/esm").
tap("MyPlugin", handler);
});
function handler(parser, options) {
parser.hooks.statement.tap('MyPlugin', (statement) => {
const module = parser.state.module;
if (module.resource
&& module.resource.endsWith('index.ts')
&& statement.type === 'VariableDeclaration'
&& statement.declarations[0].id.name === 'myVariable') {
// Do something here??
}
});
}
}
}
module.exports = MyPlugin;
webpack-4 webpack-plugin
add a comment |
I'm trying to re-assign a variable in a specific file dynamically based on passed in build arguments but I'm having trouble understanding the plugin documentation and figuring out where the place for me to wire this in would be.
The ideal scenario would be to be able to pass a file name, variable name, and variable value to the plugin (for brevity I've left out the constructor to take in these arguments), and then override/re-assign them in the given file.
I.e. Index.ts would have let myVariable = false;
, and I'd like to flip this to true based on passed in parameters to webpack.
With the below code, I can use the parser to find the variable, but I can't seem to change it. I've tried statement.declarations[0].init.raw = "true"
and statement.declarations[0].init.value = true
, but the output index.js file still has the original false value.
Am I trying to do this in the wrong part of the webpack process, or do I need to be using a different hook? Any guidance on how or where I could do this would be really helpful. Thanks.
class MyPlugin {
apply(compiler) {
compiler.hooks.beforeCompile.
tap('MyPlugin', ({ normalModuleFactory }) => {
normalModuleFactory.hooks.parser.
for("javascript/auto").
tap("MyPlugin", handler);
normalModuleFactory.hooks.parser.
for("javascript/dynamic").
tap("MyPlugin", handler);
normalModuleFactory.hooks.parser.
for("javascript/esm").
tap("MyPlugin", handler);
});
function handler(parser, options) {
parser.hooks.statement.tap('MyPlugin', (statement) => {
const module = parser.state.module;
if (module.resource
&& module.resource.endsWith('index.ts')
&& statement.type === 'VariableDeclaration'
&& statement.declarations[0].id.name === 'myVariable') {
// Do something here??
}
});
}
}
}
module.exports = MyPlugin;
webpack-4 webpack-plugin
I'm trying to re-assign a variable in a specific file dynamically based on passed in build arguments but I'm having trouble understanding the plugin documentation and figuring out where the place for me to wire this in would be.
The ideal scenario would be to be able to pass a file name, variable name, and variable value to the plugin (for brevity I've left out the constructor to take in these arguments), and then override/re-assign them in the given file.
I.e. Index.ts would have let myVariable = false;
, and I'd like to flip this to true based on passed in parameters to webpack.
With the below code, I can use the parser to find the variable, but I can't seem to change it. I've tried statement.declarations[0].init.raw = "true"
and statement.declarations[0].init.value = true
, but the output index.js file still has the original false value.
Am I trying to do this in the wrong part of the webpack process, or do I need to be using a different hook? Any guidance on how or where I could do this would be really helpful. Thanks.
class MyPlugin {
apply(compiler) {
compiler.hooks.beforeCompile.
tap('MyPlugin', ({ normalModuleFactory }) => {
normalModuleFactory.hooks.parser.
for("javascript/auto").
tap("MyPlugin", handler);
normalModuleFactory.hooks.parser.
for("javascript/dynamic").
tap("MyPlugin", handler);
normalModuleFactory.hooks.parser.
for("javascript/esm").
tap("MyPlugin", handler);
});
function handler(parser, options) {
parser.hooks.statement.tap('MyPlugin', (statement) => {
const module = parser.state.module;
if (module.resource
&& module.resource.endsWith('index.ts')
&& statement.type === 'VariableDeclaration'
&& statement.declarations[0].id.name === 'myVariable') {
// Do something here??
}
});
}
}
}
module.exports = MyPlugin;
webpack-4 webpack-plugin
webpack-4 webpack-plugin
asked Nov 13 '18 at 0:19
TekGiantTekGiant
4192623
4192623
add a comment |
add a comment |
0
active
oldest
votes
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%2f53272016%2funable-to-re-assign-variable-in-webpack-plugin-using-parser-hook%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53272016%2funable-to-re-assign-variable-in-webpack-plugin-using-parser-hook%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