question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Reference `webpack.DefinePlugin` in the readme

See original GitHub issue

webpack.DefinePlugin offer a native way to run simple replacements, which covers the first example.

I can open a PR that adds a link to this issue as documentation in the readme, and add more examples, including dynamic ones like https://github.com/sindresorhus/refined-github/commit/130c110b0645603a4c19e078064ff293d4a69fc0

With this loader

module.exports = {
  module: {
    rules: [
      {
        test: /fileInWhichJQueryIsUndefined\.js$/,
        loader: 'string-replace-loader',
        options: {
          search: '$',
          replace: 'window.jQuery',
        }
      }
    ]
  }
}

With DefinePlugin

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      $: 'window.jQuery'
    })
  ]
}

Issue Analytics

  • State:open
  • Created 4 years ago
  • Comments:10 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
Va1commented, Apr 12, 2020

as i mentioned in the previous comment, string-replace-loader is a loader on contrast to DefinePlugin being a plugin. this means, that it can be used for specific files via regex (as loaders are defined with test property) and, what’s more important, in specific positions in the loader chain (before loader A does it’s job, but over results loader B has produced, if defined between em).

this, i believe, makes both just different tools, use-cases of which intersect but are not equal by any means. which invalidates the “why 3rd party loader” question, in my opinion. examples defined in readme are plain variable replacement ones, but this does not deny the point i wrote above, as well as does not mean that more complex examples should be added to justify its existence (or does it? and does this module lack examples overall?).

what may be a justified thing to do is to reference the DefinePlugin in a form like “yo btw, if what you’re doing is a simple & global variable replacement, you may be able to achieve it via DefinePlugin, read more here”. but the emphasis on examples seems a bit over the top to me (i might be wrong tho).

1reaction
pietiacommented, Aug 14, 2019

I’ve refactored my project so that i can use DefinePlugin , so - case closed.

Read more comments on GitHub >

github_iconTop Results From Across the Web

DefinePlugin
The DefinePlugin replaces variables in your code with other values or expressions at compile time. This can be useful for allowing different behavior ......
Read more >
How to include and use DefinePlugin in webpack config?
I Have "webpack": "^4.28.4" and define in webpack config new webpack.DefinePlugin({ PRODUCTION: JSON.stringify(true), });.
Read more >
safe-webpack-define-plugin
safe-webpack-define-plugin. TypeScript icon, indicating that this package has built-in type declarations · Readme · Code Beta · 1 Dependency · 0 ...
Read more >
dotenv-webpack/README.md
`dotenv-webpack` wraps `dotenv` and `Webpack.DefinePlugin`. As such, it does a text replace in the resulting bundle for any instances of `process.env`.
Read more >
babel-plugin-transform-define
Compile time code replacement for babel similar to Webpack's DefinePlugin. Quick Start. $ npm install --save-dev babel-plugin-transform-define .babelrc
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found