Comments (18)
@andrewQwer @zjcf ProvidePlugin worked for us (for most of the places LOL)
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
}),
from expose-loader.
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?
from expose-loader.
@zjcf
Did you find any solution for this issue?
from expose-loader.
same here
from expose-loader.
@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.
from 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.js
file 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')]
from expose-loader.
Yeah, finally I got this work too. I just put expose loader to both places dll and entry.
from expose-loader.
@andrewQwer , could you please provide example of your solution?
from expose-loader.
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.
from expose-loader.
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
from expose-loader.
@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?
from expose-loader.
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.
from expose-loader.
@chrisrickard did you ever get this to work with webpack 3.x?
from expose-loader.
@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`)
}
}
from expose-loader.
I have the same issue with Webpack 4.
I have a DllPlugin
inside webpack.config.vendor.js
that contains expose-loader
for jQuery that I want globally exposed whenever the DLL file is loaded in the browser with a script tag:
<script src="/dist/vendor.js"></script>
The expose-loader
doesn't work when DllPlugin
is used. If I remove the DllPlugin
code in webpack.config.vendor.js
the globally exposed jQuery works fine in HTML and I can access $
and jQuery
from the dev tools console window. 😿
from expose-loader.
Workaround, that works for me even with webpack 4
webpack.vendor.config.js
entry: {
"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"
from expose-loader.
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.ts
and webpack.config.vendor.ts
.
webpack.config.vendor.ts
uses expose-loader
as normal:
const config: webpack.Configuration = {
module: {
rules: [
...
{
test: require.resolve('jquery'),
use: [
{
loader: 'expose-loader',
options: 'jQuery'
},
{
loader: 'expose-loader',
options: '$'
}
]
}, ...
Then, webpack.config.ts
defines vendor exports as externals
:
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 DllPlugin
and expose
. Seems to be working so far.
from expose-loader.
@bchavez I am also experiencing this problem when switching to the dllplugin. Could you provide the full config files to get this working? I am using the latest webpack and still not working.
from expose-loader.
Related Issues (20)
- Options missing in third-party loader HOT 34
- Cannot expose ts module since 1.0.0 HOT 4
- Issue with alias while exposing private module HOT 1
- Webpack omits exposed modules when sideEffects are enabled HOT 15
- ! vs | HOT 14
- Cant get new versions of expose-loader to work HOT 8
- Unable to expose jQuery HOT 4
- expose-loader works in Chrome but not FireFox? HOT 9
- Docs Mismatch and Absolutely no "local" Examples HOT 1
- opt out of development thrown error HOT 5
- Exposing a class converts it to an esmodule object HOT 2
- webpack and webpack --watch will get different output HOT 1
- jQuery is not being exposed HOT 5
- Doesn't work as expected when exposing @apollo/client HOT 26
- Customizing the runtime getGlobalThis HOT 2
- Support namespace import
- Exposing ES6 modules without the default property HOT 2
- Webpack sometimes skips modules loaded through expose-loader when tree shaking is enabled HOT 2
- File hashes change between OSs when using expose-loader to replace jQuery and $ HOT 2
- expose-loader not working correctly with webpack 4 HOT 9
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from expose-loader.