issue with dll plugin

[zjcf]

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.

[andrewQwer]

@zjcf
Did you find any solution for this issue?

[Restuta]

same here

[Restuta]

@andrewQwer @zjcf ProvidePlugin worked for us (for most of the places LOL)

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

[andrewQwer]

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

[ryanquinn3]

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')]

[andrewQwer]

Yeah, finally I got this work too. I just put expose loader to both places dll and entry.

[KhraksMamtsov]

@andrewQwer , could you please provide example of your solution?

[andrewQwer]

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.

[chrisrickard]

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

[Restuta]

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

[sepbot]

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.

[bsbodden]

@chrisrickard did you ever get this to work with webpack 3.x?

[chrisrickard]

@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`)
        }
     }

[mifopen]

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?

[bchavez]

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. 😿

[mifopen]

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"

[bchavez]

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.

[Jojoshua]

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