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: [
      // Loaders stream one file at a time before it is inserted into the
      // depencency graph.
      {
        // 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?|pn)g$/,
        use: [
          // Use object format instead of string to pass options to a loader.
          {
            loader: "file-loader",
          },
        ]
      }
    ]
  }
};