common.js

Webpack (custom build FE) with sass

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssPlugin = require('mini-css-extract-plugin')
const webpack = require('webpack');
const devMode = process.env.NODE_ENV === 'development';

module.exports = {
  entry: {
    app: ['./src/index.js']
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({ 
      filename: 'index.html',
      template: './src/views/pages/index.pug',
    }),
    new HtmlWebpackPlugin({
      filename: 'faq.html', 
      template: './src/views/pages/faq.pug',
    }),
    new webpack.HotModuleReplacementPlugin(),
    new MiniCssPlugin({
        filename: '[name].css',
    })
  ],
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: './'
   
  },
  module: {
      rules: [
        {
            test: /\.pug$/,
            use: {
              loader: 'pug-loader'
            },
          },
          {
              test: /\.(png|jpg)/,
              loader: 'file-loader',
              options: {
                outputPath: 'assets'
              }
          },
        {
            test: /\.(scss)$/,
            use: [
               {
                    loader: MiniCssPlugin.loader,
                    options: {
                      hmr: devMode,
                      reloadAll: true,
                    },
                  },
            {
              loader: 'css-loader',
            }, {
              loader: 'postcss-loader',
              options: {
                plugins: function () {
                  return [
                    require('precss'),
                    require('autoprefixer')
                  ];
                }
              }
            }, {
              loader: 'sass-loader'
            }]
        },
        {
          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[name].[ext]',
                outputPath: 'fonts/'
              }
            }
          ]
        }
      ]
  }
};