0

I'm trying to convert a large project using RequireJS to Webpack 4. The end goal is to be able to use both tools side by side, at least for development, with minimal changes to actual code required.

I'm running into an issue with converting shim entries in my RequireJS config file to their Webpack equivalents when CSS is involved. For example, here's what a RequireJS config entry looks like:

shim: {
  jsDependency: {
    deps: ["otherJsDependency", "css!cssDependency"]
  }
}

The Webpack recommended way to shim is by using imports-loader, so here's what I've tried there (inside module.rules array):

{
  test: /jsDependency/,
  use: ['imports-loader?otherJsDependency,cssDependency']
}

The JS seems to resolve fine. I can't get the CSS to load this way. Other CSS files that are explicitly imported alongside the dependencies themselves load fine.

I guess I can create a wrapper file that requires CSS and the original dependency explicitly side by side. It would be a bit of a pain but not too much work. We do have a lot of these entries in our RequireJS config.

However... is there really no way to shim / load CSS implicitly like this with Webpack? Is imports-loader the wrong tool for the job here? I feel like I must be missing something.

Thanks!

pilif
  • 31
  • 3

2 Answers2

0

imports-loader is for JavaScript. You want to use css-loader.

dave
  • 2,762
  • 1
  • 16
  • 32
  • Do you mind giving an example? With the current RequireJS build, the CSS dependency is only defined in shim config. I'd like to have it be loaded similarly with Webpack whenever the corresponding JS library is required. – pilif Apr 24 '18 at 22:40
  • I've never seen it done that way with Webpack. Typically I'm using Sass, which has it's own `@import` statements to pull in dependencies. Perhaps you could have a master css file which lists all your imports. Alternately it should be possible to explicitly import the CSS files within your JS. But I'm not sure of a way to make a single require/import statement within javascript to pull in both the CSS and JS. – dave Apr 24 '18 at 22:53
  • Fair enough, maybe I'll need to do something like this. We do use CSS imports in some other places. My main concern with refactoring all of the CSS load like this is messing with the load order. It's an old project with a ton of library CSS files "shimmed" in this way, that all apply global styles. Some of them are also lazily loaded. I have a feeling it will be a huge PITA for me to verify that all the CSS has been applied correctly if I try to make any changes to it... – pilif Apr 24 '18 at 23:03
  • Don't take my word for it that what you want can't be done. It's just not how I typically do things. You might just need a separate rule in webpack to deal with .css files separately from .js files. And quite often when dealing with CSS you need to make use of ExtractTextPlugin https://github.com/webpack-contrib/extract-text-webpack-plugin/ – dave Apr 25 '18 at 16:41
0

As far as I can tell, there is no way to do this with webpack rules that exactly mimics RequireJS' behaviour of using shim for implicit import. We used it in a lot of our old code for stuff like jQuery plugins to load CSS, for example.

The simple solution was to create an intermediate file (ie: webpack_libraryName.js) that imports and returns the library you'd like to use. You can then explicitly import anything you'd like to load as a side effect when it is imported there. Mapping this new file as an alias to the old one in Webpack config means you don't need to edit any actual code and can run both builds simultaneously.

pilif
  • 31
  • 3