Does the WebPack entry have to be a JavaScript File

Question

When you use WebPack, you typically have to set an entry point to a .js file. Is this a requirement? I have two scenarios:

I want to convert a .scss to a .css file.
I want to minify images using imagemin.

I don't have or need any JavaScript. How can this be achieved using WebPack? Is that even the right tool? I've done this using Gulp in the past. Does WebPack only make sense when you require images and CSS from your JavaScript files?

Jonathan Bartlett · Answer 1 · 2017-06-03T14:58:31.453

Webpack really isn't the right tool if you're just doing CSS stuff. It can be done though I believe. You'll need the 'css-loader', 'style-loader', 'sass-loader' and 'node-sass' packages from npm. Check the documentation for the loaders to see how to add them into your webpack.config.js

My suggestion would be to create a JavaScript file called index.js and set that as your entry point. Then require the stylesheets in that file.

require('stylesheet.css')
require('styles.sass')
//etc

You can then look at configuring extract-text-webpack-plugin which will compile to a .css file for you.

const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractSass = new ExtractTextPlugin({
    filename: "[name].css"
});

module.exports = {
    entry: "./index.js",
    output: "./index.min.js",
    module: {
        rules: [{
            test: /\.scss$/,
            use: extractSass.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }]
            },{
            test: /\.sass$/,
            use: extractSass.extract({
                use: [{
                    loader: "css-loader"
                }, {
                    loader: "sass-loader"
                }]
            })
        }]
    },
    plugins: [
        extractSass
    ]
};

I've been looking at the docs but haven't spotted a way to do it. — Muhammad Rehan Saeed, Jun 03 '17 at 14:39
@MuhammadRehanSaeed I've added a potential solution but it seems a little long winded and I'm sure a basic sass compiler like codekit/koala would do the job better for you. — Jonathan Bartlett, Jun 03 '17 at 14:52

owais · Answer 2 · 2017-06-05T03:28:27.877

For .scss to sass use sass-loader and css-loader. and for minifying images use image-webpack-loader.

Whole configuration for webpack.conig.js is show below

module.exports = {
    entry: './app.js',
    output: {
        filename: 'bundle.js'
    },
    module: {
        rules: [
        {
            test: /\.s[ac]ss$/,
            use: ExtractTextPlugin.extract({
                use: ['css-loader', 'sass-loader'],

                fallback: 'style-loader'
            })
        }, {
            loader: 'image-webpack-loader',
            query: {
                mozjpeg: {
                    progressive: true,
                },
                gifsicle: {
                    interlaced: false,
                },
                optipng: {
                    optimizationLevel: 4,
                },
                pngquant: {
                    quality: '75-90',
                    speed: 3,
                },
            }
        }
        ]
    }
}

Does the WebPack entry have to be a JavaScript File

2 Answers2