Bundling CSS and JS using webpack with one config

Question

I'm trying to understand how webpack works. I'm developing a Wordpress theme and I decided to give Webpack a try.

I'm struggling with configuration for Webpack. Configuring it for handling SASS was fairly easy, but when it came to adding support for JS files that should be bundled into one JS file: scripts.js , then it became too difficult to understand how it works.

That's my config:

const ExtractTextPlugin = require('extract-text-webpack-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    devtool: 'source-map',
    watch: true,
    entry: ['./scss/style.scss'],
    output: {
        filename: './style.css',
        publicPath: '/'
    },
    module: {
        rules: [{
            test: /\.scss$/,
            exclude: /node_modules/,
            loader: ExtractTextPlugin.extract(['css-loader', 'sass-loader'])
        }]
    },
    plugins: [
        new ExtractTextPlugin({ // define where to save the file
            filename: './style.css',
            allChunks: true
        }),
        new UglifyJSPlugin({
            sourceMap: true
        })
    ]
};

I'm wondering how the configuration for JS files should look like?

Answer 1

Replace the webpack options:

entry: ['./scss/style.scss'],
output: {
    filename: './style.css',
    publicPath: '/'
},

with

entry: ['./js/index.js'],
output: {
    filename: './bundle.js',
    publicPath: '/'
},

The content of ./js/index.js :

require('./scss/style.scss')

The output path of style.css bundle is specified alredy in your webpack config in options of ExtractTextPlugin . Include that css bundle like you generally do in html file.