dtp-base/webpack.config.js

// webpack.config.js
// Copyright (C) 2022 Rob Colbert @[email protected]
// All Rights Reserved

'use strict';

import path, { dirname } from 'path';
import { fileURLToPath } from 'url';
const __dirname = dirname(fileURLToPath(import.meta.url)); // jshint ignore:line

import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import BrowserSyncPlugin from 'browser-sync-webpack-plugin';

const webpackMode = (process.env.NODE_ENV === 'production') ? 'production' : 'development';

const plugins = [
  new MiniCssExtractPlugin(),
];

if (webpackMode === 'development') {
  plugins.push(
    new BrowserSyncPlugin({
      proxy: {
        target: 'http://localhost:3000',
        ws: true,
      },
      host: 'localhost',
      open: 'local',
      port: 3333,
      cors: true,
      ui: {
        port: 3400,
      },
      notify: false,
      ghostMode: {
        clicks: false,
        forms: false,
        scroll: true,
      },
      logLevel: 'info',
      files: [
        './dist/*.js',
        './dist/*.css',
      ],
    }),
  );
}

export default {
  entry: {
    'chat-client': [
      './client/js/chat-client.js',
      './client/css/main.less',
    ],
  },
  mode: webpackMode,
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    // clean: true,
    // publicPath: '/dist',
  },
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
  plugins,
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          {
            loader: "style-loader",
          },
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              esModule: false,
            },
          },
          {
            loader: "css-loader",
            options: {
              sourceMap: true,
            },
          },
          {
            loader: "less-loader",
            options: {
              sourceMap: true,
              lessOptions: {
                strictMath: false,
              },
            },
          },
        ],
      },
    ],
  },
};