webpack.cfg

  ///////////////////////////
 //  webpack config file  //
///////////////////////////
//NOTE: this is a Javascript file, named as config to reflect purpose
//helpful info:
//https://webpack.js.org/guides/getting-started/
//https://webpack.js.org/loaders/


const Path = require('path');
//TODO? const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//TODO? const TerserJSPlugin = require('terser-webpack-plugin');
//TODO? const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//TODO? const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
//TODO? media-query-plugin
const isProd = true? ".[hash]": ""; //more efficient cache busting for prod
console.log(`webpack cfg: ${isProd? "PROD": "DEV"}`);

module.exports =
{
  mode: "none", //isProd? "production": "development", //avoid warning message
  entry: './js/jsNotebook.js',
  output:
  {
    filename: 'jsNotebook.js', //"bundle.js", "[name].js",
    path: Path.resolve(__dirname, 'dist'),
  },
  plugins:
  [
    new CleanWebpackPlugin(),
//TODO?    new HtmlWebpackPlugin({ title: 'Output Management', }),
//TODO?    new MiniCssExtractPlugin(
//    {
//      filename: `[name]${isProd}.css`,
//      chunkFilename: `[id]${isProd}.css`,
//    }),
  ],
  module:
  {
    rules:
    [
//??      { test: /\.css$/i, use: [ 'style-loader', 'css-loader', ], },
      { test: /\.css$/i, use: [/*isProd? MiniCssExtractPlugin.loader:*/ 'style-loader', 'css-loader'], },
//      { test: /\.(png|svg|jpe?g|gif)$/i, use: [ 'file-loader', ], },
      { test: /\.(png|svg|jpe?g|gif)$/i, loader: 'url-loader', options: {limit: 10e3, }, }, //embed images < 10K using base64
//??loaders: [
//      { test: /\.(html)$/i, loader: "file?name=[path][name].[ext]&context=./app/static", },
//!needed      { test: /\.(html)$/i, loader: "file-loader?name=[name].[ext]", }, //[path][name].[ext]", }, //kludge: copy parent HTML file to output as-is
      {
        test: /\.s(a|c)ss$/i,
//        exclude: /\.module\.s(a|c)ss$/i,
        loader:
        [
          /*isProd? MiniCssExtractPlugin.loader:*/ 'style-loader',
          {
            loader: 'css-loader',
            options: { /*modules: true,*/ sourceMap: !isProd, },
          },
          {
            loader: 'sass-loader',
            options: { sourceMap: !isProd, },
          },
        ],
      },
/*
//not using modules
      {
        test: /\.module\.s(a|c)ss$/i,
        loader:
        [
          isProd? MiniCssExtractPlugin.loader: 'style-loader',
          {
            loader: 'css-loader',
            options: { modules: true, sourceMap: !isProd, },
          },
          {
            loader: 'sass-loader',
            options: { sourceMap: !isProd, },
          },
        ],
      },
*/
    ],
  },
  resolve: { extensions: ['.js', '.jsx', '.scss'], },
//TODO?  optimization: { minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})], },
};