Webpack Configuration for Web Development

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const ESLintPlugin = require('eslint-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const pk = require('./package.json');

const env = String(process.env.NODE_ENV || 'development').toLowerCase();
const version = String(pk.version) || '0.0.1';

const babelLoader = {
  test: /\.js$/,
  exclude: /(node_modules)/,
  use: {
    loader: 'babel-loader',
    options: {
      plugins: [
        '@babel/plugin-syntax-jsx',
        '@babel/plugin-syntax-dynamic-import'
      ],
      presets: [
        '@babel/preset-env',
        '@babel/preset-react'
      ]
    }
  }
};

const styleLoader = {
  test: /\.(s(a|c)ss)$/,
  use: [
    MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: { url: false }
    },
    'sass-loader'
  ]
};

const pluginEnvironment = new webpack.EnvironmentPlugin({
  NODE_ENV: env,
  VERSION: version
});

const pluginDefineESLint = new ESLintPlugin({
  failOnWarning: false,
  failOnError: false
});

const pluginBrowserSync = new BrowserSyncPlugin({
  host: 'localhost',
  port: 3000,
  proxy: 'localhost:8082'
});

const pluginMiniCssExtract = new MiniCssExtractPlugin({
  filename: 'css/[name].css'
});

const config = {
  mode: env,
  stats: {
    colors: true,
    env: true,
    errorDetails: true
  },
  module: {
    rules: [
      babelLoader,
      styleLoader
    ]
  },
  entry: {
    app: ['./client/js/index.js', './client/scss/app.scss']
  },
  output: {
    path: path.resolve(process.cwd(), './public/'),
    filename: 'js/[name].js'
  },
  resolve: {
    alias: {
      '@client': path.resolve(__dirname, './client'),
    },
    modules: [
      './',
      './node_modules/',
      './node_modules/foundation-sites/scss',
      './node_modules/hamburgers/_sass/hamburgers'
    ]
  },
  devtool: env !== 'production' ? 'source-map' : undefined,
  plugins: [
    pluginEnvironment,
    pluginDefineESLint,
    pluginBrowserSync,
    pluginMiniCssExtract
  ]
};

module.exports = config;

Webpack Configuration Explanation

This README.md file provides an explanation of the webpack configuration (webpack.config.js) included in this project.

Project Overview

The webpack configuration provided here is used to bundle and compile JavaScript and CSS files for a web application. It includes settings for transpiling JavaScript using Babel, handling CSS and SCSS files, and other development tools/plugins like ESLint, BrowserSync, and environment variables.

Configuration Details

Babel Loader

The babel-loader is configured to transpile JavaScript files using Babel. It excludes the node_modules directory and applies presets for ES6+ and React, along with necessary syntax plugins.

Style Loader

The style loader handles CSS and SCSS files. It uses mini-css-extract-plugin to extract CSS into separate files. This loader includes css-loader to interpret @import and url() like import/require() and resolves them, and sass-loader to compile SCSS to CSS.

Environment Variables

Webpack's EnvironmentPlugin is used to define environment variables. In this configuration, it sets NODE_ENV and VERSION based on the environment or package.json.

ESLint Plugin

The eslint-webpack-plugin is included to integrate ESLint into the webpack build process. It checks JavaScript files for errors and enforces coding standards. This configuration disables failing on warnings or errors to avoid breaking the build.

BrowserSync Plugin

The browser-sync-webpack-plugin is used to set up a local development server and enable live reloading. It proxies requests from the webpack development server to another server (in this case, localhost:8082).

MiniCssExtract Plugin

The mini-css-extract-plugin is used to extract CSS into separate files. It generates a styles.css file in the public/css directory, containing all CSS styles imported in the JavaScript files.

Other Configuration Options

• Entry: Specifies the entry points for the application, including JavaScript and SCSS files.
• Output: Defines the output directory and filenames for the bundled JavaScript files.
• Resolve: Specifies the directories where webpack should look for modules when resolving import statements.
• Devtool: Configures source maps based on the environment. It uses source-map in development mode for better debugging.

Usage

To use this webpack configuration, follow these steps:

1. Install dependencies using npm install.
2. Run webpack using npm run build or webpack --config webpack.config.js to build the project.
3. Start the development server using npm start or webpack serve --config webpack.config.js for live reloading.