Using extract-text & commons-chunk together, the css output for entry may or may not exist

[hanxinwei]

depending on if the entry needs at lease one more css module.
I guess this is by design.
However this is kind of inconvenient, for the server have to check if the entry css exists and decide whether to append it.

Compare the entry js to css
js: If the entry js does nothing ( even if totally empty ), the output entry file still be generated.
css: if the entry css needs no more injection, there is no output file.

Is that possible to provide a option to generate empty entry css file?

Example repo
https://github.com/hanxinwei/extract-text-commons-chunk

Source

/src
/css
style.css
style2.css
/scripts
/apps
page.js
page2.js
/services
service.js
service2.js

Page.js
import service from '../services/service';
import service2 from '../services/service2';
import '../../css/style.css';
import '../../css/style2.css';

page2.js
import '../../css/style.css';

Config

module.exports = {
    entry: {
        page: './src/scripts/apps/page.js',
        page2: './src/scripts/apps/page2.js'
    },
    output: {
        path: path.resolve(__dirname, './build/'),
        filename: 'scripts/[name].js'
    },
    module:
    {
        rules: [
            {
                test: /.css$/,
                use: ExtractTextPlugin.extract('css-loader')
            }
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'common'
        }),
        new ExtractTextPlugin('css/[name].css')
    ]
}

Output
/build
/scripts
common.js
page.js
page2.js
/css
common.css
page.css

There is no page2.css generated.

[aciccarello]

I am also running into an issue using both the ExtractTextPlugin and CommonsChunkPlugin as well. I noticed that css imported by angular-ui-bootstrap, which is included in a vendor bundle, was not being displayed.

After doing some debugging it seems that any css/scss in my project which is imported in the commons chunk will not appear in the project (either in the extracted css file or in the common module). CSS that is not imported by the vendor bundle does appear in the extracted css file. The problem goes away when the ExtractTextPlugin is disabled.

Entries

entry: {
  vendor: './vendor.js',
  main: './main.js'
}

Rules

  {
    test: /\.scss$/,
    loader: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: ['css-loader', 'sass-loader']
    })
  },

  {
    test: /\.css$/,
    loader: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: 'css-loader'
    })
  },

Plugins

  new webpack.optimize.CommonsChunkPlugin({
    name: 'vendor'
  }),

  new ExtractTextPlugin({
    filename: 'styles.css'
  }),

[michael-ciniawsky]

@hanxinwei Could you try with { allChunks: true } option set ?

[jklmli]

@aciccarello

This is because you've set filename: 'styles.css'.

That means every chunk will extract to this same location. Each one will overwrite the css output of the previous one.

The fix is to change it to filename: [name].css.

[michael-ciniawsky]

@jiaweihli Thx

@hanxinwei See @jiaweihli's comment and feel free to reopen if still regressions

[alexander-akait]

Closing due to inactivity. Seems fixed #508, please test with latest version and feel free to reopen if still regressions. Thanks!