js___webpack_concepts/webpack.config.js

const path = require("path"); // NodeJS builtin.

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "build") // path must be absolute.
  },
  module: {
    rules: [
      {
        // When a file name matches this expression...
        test: /\.js$/,
        // ...use that loader on it.
        use: "babel-loader"
      },
      {
        test: /\.scss$/,
        use: [
          // Apply down to top (right to left), like wrapped function calls.
          "style-loader", // Apply third: insert script tag for browser use.
          "css-loader", // Apply second: convert CSS to JS.
          "sass-loader" // Apply first: compile SASS to CSS.
        ]
      },
      {
        // Even for files requested by the CSS loader, which marks them as dependencies.
        test: /\.jpe?g$/,
        use: [
          // Use object format instead of string to pass options to a loader.
          {
            loader: "url-loader",
            options: {
              limit: 10000
            }
          }
        ]
      }
    ]
  }
};