Configuracion para Curso Códigofacilito

package.json

  // estas son las dependencias que use para el watch(start) y el build
  
    //scripts
    "scripts": {
    "start": "webpack-dev-server --open --config webpack/webpack.dev.js --port 3000",
    "build": "webpack --config webpack/webpack.prod.js"
    
    //dependencias
    "devDependencies": {
    "css-loader": "^6.7.1",
    "html-loader": "^4.1.0",
    "html-webpack-plugin": "^5.5.0",
    "sass": "^1.54.9",
    "sass-loader": "^13.0.2",
    "style-loader": "^3.3.1",
    "terser-webpack-plugin": "^5.3.6",
    "url-loader": "^4.1.1",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.11.0",
    "webpack-merge": "^5.8.0"
  },
  "dependencies": {
    "css-minimizer-webpack-plugin": "^4.1.0",
    "mini-css-extract-plugin": "^2.6.1"
  }

webpack.common.js

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

const htmlWebpack = new HtmlWebpackPlugin({
  template: "./src/index.template.html",   // se cambio la carpeta assets por src OPCIONAL
  filename: "index.html",
});

module.exports = {
  entry: "./src/javascript/entry.js",   // se cambio la carpeta assets por src OPCIONAL
  output: {
    publicPath: "/",
    path: path.join(__dirname, ".."),
    filename: "dist/javascript/bundle.js",
  },
  plugins: [htmlWebpack],
  module: {
    rules: [
      {
        test: /\.(svg|png|jpg)$/,
        loader: "url-loader",
      },
    ],
  },
};

webpack.dev.js

const common = require("./webpack.common.js");
const { merge } = require("webpack-merge");

module.exports = merge(common, {
  mode: "development",
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
});

webpack.prod.js

const common = require("./webpack.common.js");
const { merge } = require("webpack-merge");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const TerserJS = require("terser-webpack-plugin");

module.exports = merge(common, {
  mode: "production",
  plugins: [
    new MiniCssExtractPlugin({
      filename: "dist/css/[name].[contenthash].css",
    }),
  ],
  optimization: {
    minimize: true,
    minimizer: [new TerserJS(), new CssMinimizerPlugin({})],
  },
  output: {
    publicPath: ".",
  },
  module: {
    rules: [
      {
        test: /.scss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /\.html$/i,
        loader: "html-loader",
        exclude: /node_modules/,
        options: {
          minimize: true,
          sources: false,
        },
      },
    ],
  },
});