Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DllPlugin breaks jquery with expose-loader & ProvidePlugin #8096

Open
Jojoshua opened this issue Sep 27, 2018 · 4 comments

Comments

Projects
None yet
2 participants
@Jojoshua
Copy link

commented Sep 27, 2018

Bug report

What is the current behavior?

When using the DllPlugin, jquery cannot be exposed. Before switching to the DllPlugin jquery could be exposed either using the ProvidePlugin or expose-loader. You would need to load jquery outside of webpack in order to get it to be exposed. This means we'd need to load jquery twice.

If the current behavior is a bug, please provide the steps to reproduce.
Reference jquery in the dll configuration and then try to write external javascript code that references jquery.

Here is the gist
https://gist.github.com/Jojoshua/8d9cddb33b8d2d9388251325cf82838c

What is the expected behavior?
Allow the expose-loader or ProvidePlugin to properly reference and expose any modules setup in the DLLPlugin.

Other relevant information:
webpack version: 4.19
Node.js version: 8.12
Operating System: Win10

Additional References:
webpack-contrib/expose-loader#25
https://stackoverflow.com/questions/38871015/jquery-webpack-dll-plugin-and-provide-plugin
https://stackoverflow.com/questions/42919079/jquery-is-not-defined-in-angular-webpack-site

@sokra

This comment has been minimized.

Copy link
Member

commented Sep 27, 2018

A DLL doesn't evaluate any code. It only offers the modules for the referencing bundle. A module from the DLL can be used if the exact same module is requested from the referencing bundle. i. e. you DLL contains jquery and expose-loader!jquery. When the application requests jquery this is loaded from the DLL. When the application requests expose-loader!jquery this is loaded from the DLL. Using a DLL doesn't change the behavior of the application or the whole page. So make sure your application is working without DllReferencePlugin, than it's probably also working with it. Thread the DLL as optimization, don't put any logic in the DLL that's not in the application. For shared modules it makes sense to have the same module.rules in DLL and application.

@Jojoshua

This comment has been minimized.

Copy link
Author

commented Sep 27, 2018

I thought the purpose of the DLL was to bundle up items that are not going to change. Likely reference code like jquery, datatatables, bootstrap, etc.

This works fine if the rest of what you deliver is through webpack but if there is inline javascript or other javascript that wasn't delievered through webpack, the dll is of no use. Is there a bundling mechanism available that allows webpack delievered javascript and non-webpack delivered items access to the bundle?

Now if I could create my own bundle through something like https://docs.microsoft.com/en-us/aspnet/mvc/overview/performance/bundling-and-minification ...is there a way I can tell webpack that these items should already be available by other means and not to try and import twice when it sees the dependencies?

@sokra

This comment has been minimized.

Copy link
Member

commented Oct 1, 2018

I thought the purpose of the DLL was to bundle up items that are not going to change. Likely reference code like jquery, datatatables, bootstrap, etc.

yes. You can put jquery in the dll and it's also possible to expose it, but you need to have the expose rule in the application config too.

@Jojoshua

This comment has been minimized.

Copy link
Author

commented Oct 2, 2018

I had put the following in both my dll config and app config and inline & external javascript still could not use jquery.
{ test: require.resolve('jquery'), use: [ { loader: 'expose-loader', options: 'jQuery' }, { loader: 'expose-loader', options: '$' } ] }

For example, I could not simply pull in select2 like this and it recognize jquery.

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

However... when I added this to my main app.ts file, then everything started working.

import $ from 'jquery'; (<any>window).jQuery = $; (<any>window).$ = $;

Even if I didn't need to use jquery inside webpack delivered files, I still had to import it in order to get this recognized to the outside world. However, if I removed the dll config entirely and left to the app config, the expose-loader still does not work without the above imports.

I can however, remove the imports and use the ProvidePlugin and this works to expose jquery. This does not work when using the dll though. Any clarity to this situation would be welcomed.

new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery", "window.jQuery": "jquery", 'window.$': 'jquery' }),

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.