webpackwebpack-2extract-text-plugin

Webpack 2 - redundant bundle file after text extract


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,

Solution

  • 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.