Question: What exactly does this loader do?

[jack4it]

Or to be more specific, what exactly this loader is letting rollup do? Since it is not so clear by reading the banner Rollup does what it can do, and let Webpack finish the job.

I'm having this question because after a quick try, this loader+rollup doesn't seem to shake off a class which if I run rollup directly against it, will actually be shaken off.

Anyone sheds some lights? Thanks!

[jknight12882]

It would also be great to get some documentation around if this can be used with rollup-plugin-commonjs and rollup-plugin-node-resolve for handling node_modules.

Finally, some documentation around how this interacts with the DllPlugin

[Shyam-Chen]

Handling CSS (use rollup-plugin-postcss) and Tree-shaking

References:

• https://github.com/egoist/rollup-plugin-postcss
• https://github.com/raphamorim/webpack-2-vs-rollup

[Andarist]

@egoist @jdalton could u shed some light on the matter? live example on a todo or something would be really helpful to understand things

[jdalton]

It allows rolling up your JS bundle with rollup and handling everything else in webpack.

[Andarist]

@jdalton I got to playing with this loader cause of your tweet with that config ;)

However cannot make it to work properly. With such config:

const config = {
  context: __dirname,
  entry: './src/entry',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'module.js',
    libraryTarget: 'var',
    library: 'lib',
  },
  resolve: {
    extensions: ['.es6', '.js', '.json'],
    modules: ['node_modules', 'src'],
  },
  module: {
    rules: [{
      test: /\.js$/,
      loader: 'rollup-loader',
      options: {
        plugins: [
          rollupBabel({
            exclude: 'node_modules/**',
            plugins: ['external-helpers'],
            "plugins": [
              ["transform-regenerator", { "asyncGenerators": false, "async": false }],
            ],
            "presets": [
              "react",
              ["es2015", { "loose": true, "modules": false }],
              "stage-2"
            ],
          }),
        ],
      },
    }],
  },
}

It doesnt do much, just changing how modules are imported a little bit, but each module is still scoped webpack-style.

webpack-rollup-loader suggests in its documentation that their loader should be applied only to the entry point, so I've also tried with such test - test: /entry\.js$/. But it didnt do anything good for me, only that it has stopped applying preset-2 transforms on other files than entry.js - which seems somewhat logical, although thought that rollup should take care of it.

So I've tried the other loader (the one mentioned - webpack-rollup-loader) and this one seems to work - it hoists everything correctly and I achieve 'flat bundle', however its still wrapped in mainTemplate as a single module. Would like to get rid of this, but not a priority for now.

Would like to try rollup-loader though, as it seems to have more public traction for the time being.

[jdalton]

If you're seeing webpack wrapping then you're doing something wrong. I'll check my settings and report back.

[Andarist]

Thanks! Would really appreciate. I can make later PR with more complex example if we figure this out.

For now I went with vanilla rollup for my js bundle, but thats not ideal for my setup either.

[Andarist]

@jdalton Ive set up example, which I think is not yet properly working (as discussed above). You can take a look at config here and on output here.

[peteruithoven]

@jdalton did you have a change to check your settings? I'm also quite curious.

[jdalton]

For me it worked great. Now that webpack 3 has scope hoisting though I'm less interested in hybrid rollup support.