Webpack 2 - redundant bundle file after text extract

Question

Here's a public Gist of my Webpack configuration, which is essentially a slightly modified Webpack config ejected from Angular CLI:

https://gist.github.com/sparkbuzz/3cd017671751083e2af8c10a1ad37747

This Webpack build is generating styles.bundle.css AND styles.bundle.js, but styles.bundle.js contain commented lines that read:

// removed by extract-text-webpack-plugin

The styles.bundle.js file is completely redundant as the extract plugin removed all it's contents and dumped it in styles.bundle.css as expected.

How can I avoid loading styles.bundle.js, as the styles.bundle.css file is loaded from a link inside my resulting index.html.

In webpack.config.js there are two instances of the extract-text-webpack-plugin:

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const extractMainCSS = new ExtractTextPlugin('[name].bundle.css');
const extractSplashCSS = new ExtractTextPlugin('splash.css');

There's an entry point for styles that is the reason for having styles.bundle.js:

    styles: [
        "./src/styles/styles.scss",
        "./src/styles/vendor.scss"
    ],

Then some rules to generate splash.css and styles.bundle.css

{
    include: [
        path.join(process.cwd(), "src/styles/splash.scss")
    ],
    exclude: [
        path.join(process.cwd(), "src/styles/styles.scss"),
        path.join(process.cwd(), "src/styles/vendor.scss")
    ],
    test: /.scss$/,
    loaders: extractSplashCSS.extract({
        use: [
            'css-loader',
            'postcss-loader',
            'sass-loader'
        ]
    })
},
{
    exclude: [
        path.join(process.cwd(), "src/styles/styles.scss"),
        path.join(process.cwd(), "src/styles/vendor.scss"),
        path.join(process.cwd(), "src/styles/splash.scss")
    ],
    test: /\.scss$/,
    loaders: [
        "exports-loader?module.exports.toString()",
        "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
        "postcss-loader",
        "sass-loader"
    ]
},
{
    exclude: [
        path.join(process.cwd(), "src/styles/splash.scss"),
    ],
    include: [
        path.join(process.cwd(), "src/styles/styles.scss"),
        path.join(process.cwd(), "src/styles/vendor.scss")
    ],
    test: /\.scss$/,
    loaders: extractMainCSS.extract({
        use: [
            "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
            "postcss-loader",
            "sass-loader"
        ]
    })
},

and the two instances of the extract plugin has been added to the plugins object:

plugins: [
    extractMainCSS,
    extractSplashCSS,

score 3 · Answer 1 · answered Apr 12 '17 at 17:52

Webpack creates a bundle for each entry point. If you don't want to create a bundle, you have to include the CSS files in another entry point. extract-text-webpack-plugin will remove all CSS anyway, but if you think about it, the CSS should be part of the bundle where you use it, which in your case is probably main.

You can remove the styles entry and add the .scss files to the main entry:

main: [
    "./src/main.ts",
    "./src/styles/styles.scss",
    "./src/styles/vendor.scss"
]

To get the same name for the styles (styles.bundle.css) you also need to change your extractMainCSS.

const extractMainCSS = new ExtractTextPlugin('styles.bundle.css');

josef.van.niekerk · Accepted Answer · 2017-04-19T07:59:51.967

What I ended up doing was to revert the styles bundle to serve as an ordinary Webpack bundle on it's own, meaning no .css file.

I changed the loaders portion for my rule:

loaders: ExtractTextPlugin.extract({
    use: [
        "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
        "postcss-loader",
        "sass-loader"
    ],
    /...
})

to the following:

loaders: [
        "css-loader?{\"sourceMap\":false,\"importLoaders\":1}",
        "postcss-loader",
        "sass-loader"
    ],
    /...
})

There was no need for text extraction here. What was important to me was that I managed to get the extraction and eventually, inlining of splash.css working correctly

I still want to see what happens with multiple instances and the disabled property set to different values on each.

Webpack 2 - redundant bundle file after text extract

2 Answers2