ProvidePlugin does not work when use AutodllPlugin

[locotor]

I try to use to simplify the dll config instead of webpack dllplugin，but I have gotten two problem， the providePlugin doesn not，I use it to export $ and jQuery. and there are many warning when bundle working， said can't find export **module in @angular/core . but it's work correctly in webpack-dev-server, I use angular-webpack-starter btw. please help me how can I fix that？

[asfktz]

Hi @locotor, I'm sorry you had to wait so long.

I bet you've found another solution by now.

If I understand you correctly, you added the providePlugin to the DLL config? It works when you use it with webpack's own DllPlugin?

[Ks89]

@asfktz I confirm this issue, but only from version 0.3.0. With 0.2.1 was working very good for me.

If you want an example that you can run, check this template that I created and try to force the update of autodll from 0.2.1 to 0.3.0. When you'll run the application with 'npm start', you'll receive in browser's console this:

Uncaught ReferenceError: jQuery is not defined
    at Object.<anonymous> (vendor_56756dfdb5112bfaa5bb.js:133528)
    at __webpack_require__ (vendor_56756dfdb5112bfaa5bb.js:21)
    at Object.<anonymous> (vendor_56756dfdb5112bfaa5bb.js:133330)
    at __webpack_require__ (vendor_56756dfdb5112bfaa5bb.js:21)
    at Object.<anonymous> (vendor_56756dfdb5112bfaa5bb.js:132729)
    at __webpack_require__ (vendor_56756dfdb5112bfaa5bb.js:21)
    at Object.<anonymous> (vendor_56756dfdb5112bfaa5bb.js:132721)
    at __webpack_require__ (vendor_56756dfdb5112bfaa5bb.js:21)
    at Object../node_modules/bootstrap-loader/loader.js (loader.js from dll-reference vendor_56756dfdb5112bfaa5bb:1)
    at __webpack_require__ ((index):745)
    at fn ((index):150)
    at Object../src/app/app.module.ts (app.module.ts:33)
    at __webpack_require__ ((index):745)
    at fn ((index):150)
    at Object../src/main.ts (main.ts:35)
    at __webpack_require__ ((index):745)
    at fn ((index):150)
    at Object.2 (styles.scss?e304:26)
    at __webpack_require__ ((index):745)
    at webpackJsonpCallback ((index):58)
    at app.js:2

But blocking autodll version to 0.2.1 everything is ok.

I'm using ProvidePlugin with this way:

new AutoDllPlugin({
      debug: true,
      inject: true,
      context: __dirname,
      filename: '[name]_[hash].js',
      path: './dll',
      entry: {
        polyfills: [
          'core-js',
          'zone.js/dist/zone.js',
          'zone.js/dist/long-stack-trace-zone'
        ],
        vendor: [
          '@angular/platform-browser',
          '@angular/platform-browser-dynamic',
          '@angular/core',
          '@angular/common',
          '@angular/forms',
          '@angular/http',
          '@angular/router',
          '@angularclass/hmr',
          '@ngrx/store',
          '@ngrx/store-devtools',
          'rxjs',
          '@ng-bootstrap/ng-bootstrap',
          'style-loader',
          'jquery',
          'bootstrap-loader',
          'hammerjs',
          'lodash',
          'mousetrap',
          'ng2-validators',
          'reflect-metadata',
          'tether'
        ]
      }
    }),

Do you have any ideas?

Thank u.

[asfktz]

Thanks for reporting @Ks89 I'll take a look at it

[asfktz]

@Ks89 What OS do you use? and node version

[Ks89]

@asfktz macOS 10.12.6 node 8.5.0 npm 5.3.0

[asfktz]

Hi, @Ks89

I'm sorry my friend but I have only bad news for you.

Seem like the issue with ProvidePlugin is related to the webpack's DllPlugin itself (AutoDllPlugin is using it under the hood).

ProvidePlugin does not affect modules bundled inside the DLL, so when Bootstrap (which included in the DLL) expects jQuery to be present by the ProvidePlugin, it throws an errors.

I made a simple test to demonstrate the bug using webpack's DllPlugin: https://github.com/asfktz/dllplugin-with-provide

You might wonder why it worked for you in version 0.2.1? Well, the sad truth is that it didn't. You set the context to __dirname But since your webpack config is inside ./config it should have been path.join(__dirname, '..'), pointing to the root of your project.

The result of that is that your vendor modules are included both in the DLL bundle: ./dist/dll/vendor_c3dde9f125018a7b63b3.js and in you common chunk bundle: ./dist/vendor.js. This is bad.

Set the context to path.join(__dirname, '..') and your good to go (as long as you don't use the ProvidePlugin).

One why the solve the bug with ProvidePlugin & the DllPlugin is to expose jQuery globally, you can use expose-loader for that.

I really don't like it. But it will work.

Hope I could find a better solution. Asaf.

[Ks89]

Ok, understood. Thank u very much for your time. I'll try with expose-loader.

I'll watch this issue :)

[Ks89]

@asfktz I tried to modify your example (https://github.com/asfktz/dllplugin-with-provide) with expose-loader instead of ProvidePlugin but I'm still receiving the same error.

Please, could you create a branch with a working configuration?

[GrimaceOfDespair]

I was able to use AutoDllPlugin together with jQuery and bootstrap by moving jQuery out of the dll bundle:

webpack.config.js:

const jqueryPath = require('fs').realpathSync(`${__dirname}/node_modules/jquery/dist/jquery.min.js`);

module.exports = {
    
    /* Entry points: vendor and app */
    entry: {
        'vendor': './vendor.ts',
        'app': './main.ts'
    },

    /* Point webpack to the jQuery script  */
    resolve: {
        alias: {
            jquery: jqueryPath
        }
    },

    /* Make jQuery globally available  */
    module: {
      rules: [{
        test: jqueryPath,
        use: [{
          loader: 'expose-loader',
          options: '$'
        },{
          loader: 'expose-loader',
          options: 'jQuery'
        }]
      }],
    },

    /* Auto-create dll bundle without jQuery */
    plugins: [
        new AutoDllPlugin({
           entry: { static: ['bootstrap'] }
        }),
    ]
}

vendor.ts:

import 'bootstrap';

main.ts:

import 'jquery';