webpack.config.js

const currentTask = process.env.npm_lifecycle_event;
const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { template } = require("lodash");
const fse = require("fs-extra");

const postCSSPlugins = [
  //install plugins and them here
  require("postcss-import"),
  require("postcss-mixins"),
  require("postcss-simple-vars"),
  require("postcss-nested"),
  require("autoprefixer")
];

class RunAfterCompile {
  apply(compiler) {
    compiler.hooks.done.tap("Copy images", function () {
      fse.copySync("./app/assets/images", "./docs/assets/images");
    });
  }
}

let cssConfig = {
  //what should webpack do when encounters css file
  test: /\.css$/i, //if this test is passed...
  use: [
    "css-loader", //?url=false means that we don't want webpack to manage our image files
    {
      loader: "postcss-loader",
      options: {
        postcssOptions: {
          plugins: postCSSPlugins //can be another name than postCSSPlugins (variable created in the beginning of the file)
        }
      }
    }
  ] //... then use these package (css-loader understands and bundles css file into js file, and style-loader actually applies this css in the browser)
};

let pages = fse
  .readdirSync("./app")
  .filter(function (file) {
    return file.endsWith(".html");
  })
  .map(function (page) {
    return new HtmlWebpackPlugin({
      filename: page,
      template: `./app/${page}`
    });
  });

let config = {
  entry: "./app/assets/scripts/App.js",
  plugins: pages,
  module: {
    rules: [cssConfig]
  }
};

if (currentTask == "dev") {
  cssConfig.use.unshift("style-loader");
  config.output = {
    filename: "bundled.js",
    path: path.resolve(__dirname, "app") //where to create bundled file
  };
  config.devServer = {
    watchFiles: ["./app/**/*.html"],
    static: "./app", //"app"
    hot: true,
    port: 3000,
    host: "0.0.0.0" //so devices in the same network can reach the page - for this I need my local ip (ipconfig -> IPv4 Address) then in other device type [ip]:3000
  };
  config.mode = "development";
}

if (currentTask == "build") {
  config.module.rules.push({
    test: /\.js$/,
    exclude: /(node_modules)/,
    use: {
      loader: "babel-loader",
      options: {
        presets: ["@babel/preset-env"]
      }
    }
  });
  cssConfig.use.unshift(MiniCssExtractPlugin.loader);
  config.output = {
    filename: "[name].[chunkhash].js",
    chunkFilename: "[name].[chunkhash].js",
    path: path.resolve(__dirname, "docs") //where to create bundled file
  };
  config.mode = "production";
  config.optimization = {
    splitChunks: { chunks: "all" },
    minimize: true,
    minimizer: [`...`, new CssMinimizerPlugin()]
  };
  config.plugins.push(
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({ filename: "styles.[chunkhash].css" }),
    new RunAfterCompile()
  );
}

//watch: true, //no needed when we have devServer on //webpack stays running once we run it once (otherwise we would need to ask to recreate bundled.js everytime we change sth)

module.exports = config;