Webpack, multiple entry points Sass and JS

Yes you can do this, here’s an example that does not require you to import sass files in your js files:

const config = {
    entry: {
        main: ['./assets/js/main.js', './assets/css/main.scss'],
    },
    module: {
        rules: [
            {test: /\.(css|scss)/, use: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])}
            // ...  
        ],
    },
    output: {
        path: './assets/bundles/',
        filename: "[name].min.js",
    },
    plugins: [
        new ExtractTextPlugin({
            filename: '[name].min.css',
        }),
        // ...
    ]
    // ...
}

You should end up with ./assets/bundles/main.min.js and ./assets/bundles/main.min.css. You will have to add js rules obviously.

Leave a Comment

File not found.