Guidelines for Webpack Configuration

This project uses Webpack for bundling and build processes. The configuration is designed for a modern web development project, supporting JavaScript, TypeScript, CSS, SCSS, and asset management. Here's an overview of the key components and how to modify them:

Entry Point

The main JavaScript file is set to './src/assets/js/main.js'. If you need to change the entry point, modify this line:

entry: {
  main: './src/assets/js/main.js'
},
  

Development Server

The dev server is configured with hot reloading and watches files in the 'src' directory. It runs on port 3003. To change these settings, edit the devServer object:

devServer: {
  watchFiles: ['src/**/*'],
  hot: true,
  port: 3003
},
  

Module Rules

The configuration handles CSS, SCSS, and image files. To add or modify loaders, edit the rules array in the module object. For example, to add a new loader for TypeScript:

module: {
  rules: [
    // ... existing rules
    {
      test: /\.tsx?$/,
      use: 'ts-loader',
      exclude: /node_modules/,
    },
  ]
},
  

Plugins

Several plugins are used for various tasks. To add a new plugin, first import it at the top of the file, then add it to the plugins array:

const NewPlugin = require('new-webpack-plugin');

// ... in the plugins array:
plugins: [
  // ... existing plugins
  new NewPlugin({
    // plugin options
  }),
],
  

Output

The bundled JavaScript is output as 'assets/js/app.js' in the 'dist' directory. To change this, modify the output object:

output: {
  filename: 'assets/js/app.js',
  path: path.resolve(__dirname, 'dist'),
  clean: true
}
  

Remember to run `npm run build` after making changes to see them reflected in your build. For more detailed information on Webpack configuration, refer to the official Webpack documentation.