Repository navigation
issue with dll plugin #25
Description
Activity
@zjcf
Did you find any solution for this issue?same here
@andrewQwer @zjcf ProvidePlugin worked for us (for most of the places LOL)
new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery', }),Reacted by Lucas SilvaReacted by Lucas Silva@Restuta unfortunately this doesn't work for me, because ProvidePlugin injects listed modules into another module where $, jQuery or window.jQuery is used. In my case third party library adds handler to html element like
onCLick='jQuery(blablabla...)'that can't be solved by ProvidePlugin, but only with expose-loader.I believe I got this to work. You just need to make sure the normal bundle imports the jQuery module with expose. I did so in my webpack.config
I have a
dll.jsfile that looks like this:module.exports.vendor = [ 'expose?jQuery!jquery', //...other vendor files ]
In my dll.config.js:
const DLL = require('./dll.js'); module.exports = { entry: { vendor: DLL.vendor(), }, //... }
My webpack.config.entry looks like:
app: [...DLL.vendor(), fromRoot('client/main.ts')]
Yeah, finally I got this work too. I just put expose loader to both places dll and entry.
@andrewQwer , could you please provide example of your solution?
I just put this line into loaders section in both places: dll config and entry build config
{ test: require.resolve('jquery'), loader: 'expose?$!expose?jQuery' }It worked for my problem with jqGrid library.
Hi guys, im on webpack 3.0.0 - and still can't seem to get this to work.
neither "$" or "jQuery" are being exposed on the window (although my DLL is being included ok)
My DLL looks like
module.exports = { entry: { vendor: [ 'jquery', ], }, module: { rules: [ { test: /\.js?$/, include: [path.resolve(__dirname, "src/vendor/jquery/jquery.min.js")], loader: "expose-loader?$!expose-loader?jQuery", } ] }, output: { filename: '[name].js', path: path.resolve(__dirname, 'dist_build'), library: '[name]', },resolve: { alias: { jquery: path.resolve(__dirname, 'src/vendor/jquery/jquery.min.js') } }, plugins: [ new webpack.DllPlugin({ // The manifest we will use to reference the libraries context: __dirname, path: 'vendor-manifest.json', name: '[name]' }) ] };And in my webpack.config I have:
new webpack.DllReferencePlugin({ context: '.', manifest: require('./vendor-manifest.json') });and in module rules
{ test: /\.js?$/, include: [path.resolve(__dirname, "src/vendor/jquery/jquery.min.js")], loader: "expose-loader?$!expose-loader?jQuery", },Any help would be appreciated
@ryanquinn3 @andrewQwer are you sure your normal bundle doesn't contain jQuery since the whole point of doing this is to extract jQuery it to DLL, right? Could you guys please confirm that it doesn't?
I could only get it working using a hacky workaround.
Took the dependencies that have globals out of the regular DLL/reference bundles.
Made two new bundles:
One DLL for globals only. This one is not deployed, it's just to get the manifest.
The other is a regular entry bundle that points to a js file that requires the global dependencies. This one is also using expose-loader to expose said dependencies. This one gets deployed.Seems to work, but now I have four bundles. Somewhat inconvenient, but at least the project changes are bundled separately and that is the thing that changes regularly.
@chrisrickard did you ever get this to work with webpack 3.x?
@bsbodden I did yes, I found out that I had to include the jquery alias in my main webpack.config (even though it was being included from my webpack.vendor.dll.js).
resolve: { alias: { // even though included in webpack.vendor.dll.js, // the alias still required for lookup jquery: fs.realpathSync(`${__dirname}/src/vendor/jquery/jquery.min.js`) } }I think issue #webpack/webpack#4589 is somehow linked to this issue. @zjcf,
require("expose?$!jquery")works because its resource name is the same as resource name of exposed jquery in dll manifest:{ "name": "vendor_dll", "content": { "./node_modules/expose-loader/index.js?$!./node_modules/jquery/dist/jquery.js": { "id": 1, // exposed jquery "meta": {} }, "./node_modules/webpack/buildin/global.js": { "id": 2, "meta": {} }, "./node_modules/jquery/dist/jquery.js": { "id": 3, // original jquery "meta": {} } } }
If I
import $ from "jquery";then dll plugin will delegate to original jquery module in vendor dll, instead of exposed.
@sokra, can you help with this?Reacted by Ivan Sosnin and Brian ChavezI have the same issue with Webpack 4.
I have a
DllPlugininsidewebpack.config.vendor.jsthat containsexpose-loaderfor jQuery that I want globally exposed whenever the DLL file is loaded in the browser with a script tag:<script src="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/dist/vendor.js"></script>The
expose-loaderdoesn't work whenDllPluginis used. If I remove theDllPlugincode inwebpack.config.vendor.jsthe globally exposed jQuery works fine in HTML and I can access$andjQueryfrom the dev tools console window. 😿Workaround, that works for me even with webpack 4
webpack.vendor.config.jsentry: { "vendor": [ ... "expose-loader?$!expose-loader?jQuery!jquery", ... ] }webpack.config.js
resolve: { ... alias: { ... "jquery": path.resolve(__dirname, "./node_modules/expose-loader/index.js") + "?$!" + path.resolve(__dirname, "./node_modules/expose-loader/index.js") + "?jQuery!" + path.resolve(__dirname, "./node_modules/jquery/dist/jquery.js-exposed") } }And now I can simply
import $ from "jquery";"webpack": "^4.6.0"
"expose-loader": "^0.7.5"Thanks a bunch @mifopen for sharing your configuration workaround. I will give it a try. Just want to point out for others that stumble on this difficult bug, the way I solved this is to create two independent config files:
webpack.config.tsandwebpack.config.vendor.ts.webpack.config.vendor.tsusesexpose-loaderas normal:const config: webpack.Configuration = { module: { rules: [ ... { test: require.resolve('jquery'), use: [ { loader: 'expose-loader', options: 'jQuery' }, { loader: 'expose-loader', options: '$' } ] }, ...
Then,
webpack.config.tsdefines vendor exports asexternals:const config : webpack.Configuration = { ... externals: { //List all globally exposed packages defined in webpack.config.vendor.ts jquery: "jQuery", ... },
The HTML looks like:
<!-- from webpack.config.vendor.ts entry --> <script src="vendor.js"></script> <!-- from webpack.config.ts entry --> <script src="entry.js"></script>
This way I pretty much avoid idiosyncrasies with
DllPluginandexpose. Seems to be working so far.
Hi, I got a problem when use expose and dll plugin at the same time, when I put the jquery in dll plugin, it will not work.
If I don't use dll plugin, it can work well both use
require('expose?jQuery!jquery')and write it in webpack config file.But since I put jquery in dll plugin, it can only work by using
require('expose?jQuery!jquery'). If I write the jquery loader in config file, it will not work. All the code is the same, except I write a dll plugin.