webpack-contrib / expose-loader

Expose Loader

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

webpack 4 webpack.config approach doesn't work

eerrecalde opened this issue · 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?

@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!

@eerrecalde

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

commented

+1

Fixed in the master