fqborges / webpack-fix-style-only-entries

Webpack plugin to solve the problem of having a style only entry (css/sass/less) generating an extra js file.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Support javascript entry file

CyberAP opened this issue · comments

I am building my css bundle using webpack's require.context.

Config

    entry: {
      app: './entries/application.js',
      styles: './entries/styles.js'
    },

styles.js

require.context('../css', false, /\.css$/);
require.context('../components', true, /\.css$/);
require.context('../pages', true, /\.css$/);

It would be super awesome to have this plugin working for js entries as well.

Hello! Let me see if I understand: you are using a styles.js file just to "automagically" require all your styles in a single entry. Is that right?

Using 'js' as a style extension will probably broke your build completely, since the empty output js is not really empty, so the plugin just delete any js file from any js entry it matches.

What I think you can do is, use something like "styles.css.js" and use "css.js" as your style extension. I am busy right now, so I have not tested it, but try this:

Config

entry: {
  app: './entries/application.js',
  styles: './entries/styles.css.js'
},
plugins: [
  new FixStyleOnlyEntriesPlugin({ extensions:['css.js'] }),
]

styles.css.js

require.context('../css', false, /\.css$/);
require.context('../components', true, /\.css$/);
require.context('../pages', true, /\.css$/);

And please, let me know if it works.

Worked like a charm. Thanks a lot!