webpack 4 webpack.config approach doesn't work
eerrecalde opened this issue · 14 comments
- Operating System: masOs
- Node Version: 10.x.x
- NPM Version: 6.x.x
- webpack Version: 4
- expose-loader Version: 0.7.5
This issue is for a:
- bug
- feature request
- modification request
Code
CLI Command
# paste the CLI command you're using. if this isn't applicable, it's safe to remove.
$ {webpack --env.mode development}
Expected Behavior
Adding this in webpack.config.js should just work:
{ test: require.resolve('jquery'), use: [{ loader: 'expose-loader', options: 'jQuery' },{ loader: 'expose-loader', options: '$' }] }
Actual Behavior
It doesn't work. (tested it by inspecting angular.js file in the moment it checks for jQuery existence)
The inline version of this approach works fine (but breaks my tests):
import "expose-loader?$!jquery";
import "expose-loader?jQuery!jquery";
Thanks
Hi, any updates about this?
@eerrecalde PR welcome
@evilebottnawi Is that mean "we won't fix it" or "we don't have the time at the moment but we'll eventually fix it / have a look at it"?
Thanks!
we don't have the time at the moment but we'll eventually fix it / have a look at it
That sounds great 👍 Thanks!
module: {
rules: [
{
test: require.resolve('knockout'),
use: [{
loader: 'expose-loader',
options: 'ko'
}]
},
and
entry: {
vendor: ['expose-loader?ko!knockout',
does not work as well.
Is this gonna be updated? Because of this I can't upgrade to webpack v4. or any workaround?
Is this gonna be updated? Because of this I can't upgrade to webpack v4. or any workaround?
@krunalshah68, the workaround I found is to use it inline rather than in the webpack.config. In my case, I have something like this in the entry file:
import "expose-loader?$!jquery"; import "expose-loader?jQuery!jquery"
@eerrecalde Thanks for the response.
But the thing is that I'm having a non-spa python flask based website so I want to have it configured in webpack only. Any workaround for this?
I can confirm that this appears to be an issue in my case as well.
I cannot get the alternate webpack.config
approach to work with Webpack (v4.29.0) but using the inline loader syntax works great as @eerrecalde mentioned!
I have found that this works as expected if you also independently require in the file, e.g. an import 'jquery';
somewhere at the top of your bundle (before you import other plugins or whatever needs global jQuery to be available). The "problem" is just that simply having the expose-loader
rule in your webpack config does not actually cause jquery to be required in anymore; it just exposes it globally when it is subsequently required in. (I use quotes around "problem" because this seems like it may be an intentional behaviour change in webpack 4 -- I noticed the same change between v3 and v4 with how CommonsChunk
/splitGroup
modules work.) The inline import
syntax works because that's actually putting a require
directly into your bundle.
Is there any update on this? I have large amounts of legacy JQuery code and I would like to upgrade to webpack 4 but unfortunately I can't install jQuery globally through webpack and I can't import it in the bundle.js as some of the jquery libraries used do not support webpack when they were written.
For now my alternative is simply to call it in my main index.html as a script tag. Which is okay, but would prefer to use webpack here XD
+1
Fixed in the master