Webpack: Extracting vendor chunk breaks dynamic import()

381 Views Asked by At

I would like to be able to import CSS in one of my entry chunks (called "vendor") and extract it using the ExtractTextPlugin to a "vendor.css" file.

At the same time I also seek to being able to import arbitrary CSS inside chunks which are getting imported dynamically (using ES6's import() function).

I can't get both to work:

{
        test: /\.css$/,
        // do not apply the ExtractTextPlugin in the app folder
        exclude: [helpers.root("app"), helpers.root("node_modules")],
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: {
                loader: "css-loader",
                options: {
                    minimize: CSSNANO_MINIMIZE_OPTIONS
                }
            }
        })
    },
    {
        test: /\.css$/,
        // only apply these to Components in the app folder
        include: [helpers.root("app"), helpers.root("node_modules/@swimlane/ngx-charts")],
        use: [
            "to-string-loader",
            {
                loader: "css-loader",
                options: {
                    importLoaders: 1, // 1 loader is applied before the css-loader
                    minimize: CSSNANO_MINIMIZE_OPTIONS
                }
            }
        ]
    },
    {
        test: /\.css$/,
        // only apply these to vendor files in the node_modules folder
        include: [helpers.root("node_modules")],
        exclude: [helpers.root("node_modules/@swimlane/ngx-charts")],
        loaders: ["style-loader", {
            loader: "css-loader",
            options: {
                importLoaders: 1, // 1 loader is applied before the css-loader
                minimize: CSSNANO_MINIMIZE_OPTIONS
            }
        }]
    },
    {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: [
                {
                    loader: "css-loader",
                    options: {
                        minimize: CSSNANO_MINIMIZE_OPTIONS
                    }
                },
                "sass-loader"
            ]
        })
    }
}

My vendor.ts (one of the entry chunks) looks like this:

import "font-awesome/css/font-awesome.min.css";
import "vendor/bootstrap/bootstrap.scss";

After the build the vendor.css only contains bootstrap's CSS, but not font-awesome's. If I instead simplify my config to use the ExtractTextPlugin for everything but my Angular 4 components I can no longer dynamically import vendor libraries inside my code:

{
        test: /\.css$/,
        exclude: [helpers.root("app")],
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: {
                loader: "css-loader",
                options: {
                    minimize: CSSNANO_MINIMIZE_OPTIONS
                }
            }
        })
    },
    {
        test: /\.css$/,
        include: [helpers.root("app"), helpers.root("node_modules/@swimlane/ngx-charts")],
        use: [
            "to-string-loader",
            {
                loader: "css-loader",
                options: {
                    importLoaders: 1, // 1 loader is applied before the css-loader
                    minimize: CSSNANO_MINIMIZE_OPTIONS
                }
            }
        ]
    },
    {
        test: /\.scss$/,
        exclude: /node_modules/,
        use: ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: [
                {
                    loader: "css-loader",
                    options: {
                        minimize: CSSNANO_MINIMIZE_OPTIONS
                    }
                },
                "sass-loader"
            ]
        })
    }
}

With that configuration something like

require("katex/dist/katex.css");
export default require("katex");

which I import dynamically won't work, I get an exception when opening my site in a browser.

What is wrong with my configuration?

Thanks.

Update: Okay, apparently it is related to a bug in the ExtractTextPlugin: https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/456

0

There are 0 best solutions below