How to use the materialize-loader with entry as an object?

Question

In the documentation to get materialize-loader custom configurations to work it mentions:

module.exports = {
  entry: [
    "materialize-loader!./path/to/materialize.config.js",
    "your-existing-entry-point"
  ]
};

But how do you import it in when your entry is an object? I have tried "materialize-loader": "materialize-loader!./src/materialize.config.js", and it does not work. My custom configurations in my materialize.config.scss file are not getting applied.

My webpack is the following:

var webpack = require("webpack");
var path = require("path");
var CopyWebpackPlugin = require('copy-webpack-plugin');

// Webpack Config
var webpackConfig = {
    entry: {
        "polyfills": "./src/polyfills.browser.ts",
        "vendor": "./src/vendor.browser.ts",
        "main": "./src/main.browser.ts"
    },

    output: {
        path: "./dist"
    },

    plugins: [
        new webpack.optimize.OccurenceOrderPlugin(true),
        new webpack.optimize.CommonsChunkPlugin({
            name: ["main", "vendor", "polyfills"],
            minChunks: Infinity
        }),
        new webpack.ProvidePlugin({
            jQuery: "jquery",
            $: "jquery",
            jquery: "jquery"
        }),
        new CopyWebpackPlugin([{
            from: 'src/app/images',
            to: 'images'
        }])
    ],

    module: {
        loaders: [
            // Load typescript
            {
                test: /\.ts$/, 
                loaders: ["awesome-typescript-loader", "angular2-template-loader"]
            },
            // Load css
            {
                test: /\.css$/, 
                loaders: ["to-string-loader", "css-loader"]
            },
            // Load html
            {
                test: /\.html$/, 
                loader: "raw-loader"
            },
            // Load scss
            {
                test: /\.scss$/, 
                loaders: ["raw-loader", "sass-loader"]
            },
            // Load woff fonts
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: "url?limit=10000&mimetype=application/font-woff"
            },
            // Load other fonts
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
                loader: "file"
            }
        ]
    }

};


// Our Webpack Defaults
var defaultConfig = {
    devtool: "cheap-module-source-map",
    cache: true,
    debug: true,
    output: {
        filename: "[name].bundle.js",
        sourceMapFilename: "[name].map",
        chunkFilename: "[id].chunk.js"
    },

    resolve: {
        root: [path.join(__dirname, "src")],
        extensions: ["", ".ts", ".js"]
    },

    devServer: {
        historyApiFallback: true,
        watchOptions: {aggregateTimeout: 300, poll: 1000}
    },

    node: {
        global: 1,
        crypto: "empty",
        module: 0,
        Buffer: 0,
        clearImmediate: 0,
        setImmediate: 0
    }
};

var webpackMerge = require("webpack-merge");
module.exports = webpackMerge(defaultConfig, webpackConfig);

Answer 1

Answered by Zevran :

entry: {
        "polyfills": "./src/polyfills.browser.ts",
        "vendor": [
            "materialize-loader!./path/to/materialize.config.js",
            "./src/vendor.browser.ts"
        ],
        "main": "./src/main.browser.ts"
    },