Webpack regular expressions

Question

Having a first go at webpack.

In my root directory I have my main.js entry point and am also checking for .js and .scss files

It does compile the main.js file.

Webpack cannot seem to find any other .scss or .js files. What have I done wrong.

Full config below:

var webpack = require('webpack');
var path = require('path');
let ExtractTextPlugin = require("extract-text-webpack-plugin");




    var webpack = require('webpack');
    var path = require('path');
    let ExtractTextPlugin = require("extract-text-webpack-plugin");


    module.exports = {

        entry: './main.js',
        output: {
            path: path.resolve(__dirname, './dist3'),
            filename: 'bundle5.js'
        },

        module: {
            rules: [

             {  test: /\.js$/, 
                    exclude: /node_modules/, 
                    loader: "babel-loader?presets[]=es2015",

                 },

                {
                    test:/\.scss$/,
                    use: ExtractTextPlugin.extract({
                        use: ['css-loader', 'sass-loader'],
                        fallback: 'style-loader',
                    })
                },



            ]
        },

        plugins: [

            //new webpack.optimize.UglifyJsPlugin(),
            new ExtractTextPlugin('ross.css')

        ]

    };

Answer 1

Webpack does not just include every file that is in your project, but instead starts from the entry point(s) and includes everything that is required in these files and their dependencies. If you want files to be included in your bundle you import them, even scss or other non-JavaScript files, and the loaders that match some rules will transform them to valid JavaScript. For example you can import an .scss file in JavaScript:

import './styles.scss';

You can also have multiple entry points that will add them with all their dependencies into the bundle. Take a look at the official docs for entry points: https://webpack.js.org/concepts/entry-points/

The loaders you define in module.rules just tell webpack how to process imports that match the regular expression you're using. For more information see: https://webpack.js.org/concepts/loaders/