webpack.config.common.js

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const DIST_SLUG = 'distribution';
const DIST = path.resolve(__dirname, DIST_SLUG);

module.exports = {
  entry: {
    application: './source/scripts/application.js',
    'application-header': './source/scripts/application-header.js',
    styles: './source/styles/application.scss',
    ie: './source/styles/ie.scss',
    print: './source/styles/print.scss',
  },
  output: {
    filename: 'scripts/[name].js',
    path: DIST,
    publicPath: `/${DIST_SLUG}/`,
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        // include: /node_modules/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: ['autoprefixer'],
                sourceMap: true,
              },
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sassOptions: {
                includePaths: ['node_modules'],
                sourceMap: true,
              },
            },
          },
        ],
      },
      {
        // Capture eot, svg, ttf, woff, and woff2
        test: /\.(eot|svg|ttf|woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name][ext][query]',
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.json', '.css', '.scss'],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles/[name].css',
      chunkFilename: 'styles/[id].css',
    }),
  ],
};