webpack.config.js

webpack.config.js

const path = require('path')
const { loader: MiniCssExtractLoader } = require('mini-css-extract-plugin')
const { HotModuleReplacementPlugin, SourceMapDevToolPlugin } = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const ESLintPlugin = require('eslint-webpack-plugin')
const StyleLintPlugin = require('stylelint-webpack-plugin')

module.exports = {
  mode: Settings.mode.name,
  devtool: false,
  entry: './main.scss',
  output: {
    futureEmitAssets: true, // improves Webpack speed
    pathinfo: Settings.mode.prod, // improves Webpack speed in development
    path: resolve(Settings.path.root, 'public', Settings.env.outputFolder),
    publicPath: Settings.mode.prod ? `${Settings.env.cdn}/${Settings.env.outputFolder}/` : '/',
    filename: Settings.mode.prod ? 'js/[name].[chunkhash].js' : 'js/[name].js',
    chunkFilename: Settings.mode.prod ? 'js/[name].[chunkhash].js' : 'js/[name].js',
  },
  performance: {
    hints: Settings.mode.prod ? 'error' : false,
    maxEntrypointSize: Settings.env.maxEntrypointSize * 1024,
    maxAssetSize: Settings.env.maxAssetSize * 1024,
  },
  optimization: {
    removeAvailableModules: false, // improves Webpack speed in development
    removeEmptyChunks: false, // improves Webpack speed in development
    noEmitOnErrors: true,
    runtimeChunk: false,
    splitChunks: false, // improves Webpack speed in development
  },
  module: {
    rules: [
      // JAVASCRIPT loader (using BABEL)
      {
        test: /\.(mjs|js)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
            },
          },
        ],
      },
      // STYLE loader (using SASS and POSTCSS)
      {
        test: /\.(scss|sass|css)$/,
        use: [
          {
            loader: MiniCssExtractLoader,
            options: {
              esModule: true,
              hmr: Settings.mode.dev,
            },
          },
          {
            loader: 'css-loader',
            options: {
              esModule: true,
              sourceMap: true,
              importLoaders: 3,
            },
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'resolve-url-loader',
            options: {
              sourceMap: true,
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
              implementation: require('sass'),
              sassOptions: {
                outputStyle: 'expanded',
              },
            },
          },
        ],
      },
      // IMAGE loader
      {
        test: /\.(webp|png|jpg|jpeg|gif|svg|ico)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: Settings.mode.prod ? 'images/[name].[hash].[ext]' : 'images/[name].[ext]',
            },
          },
          {
            loader: 'image-webpack-loader',
            options: {
              disable: Settings.mode.dev,
            },
          },
        ],
      },
      // FONT loader
      {
        test: /\.(woff|woff2|eot|ttf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: Settings.mode.prod ? 'fonts/[name].[hash].[ext]' : 'fonts/[name].[ext]',
            },
          },
        ],
      },
    ],
  },
  plugins: [
    // Enable HMR globally
    new HotModuleReplacementPlugin(),

    // Custom source map output
    new SourceMapDevToolPlugin({
      test: /\.(mjs|js|scss|sass|css)$/,
      exclude: ['vendors.js'],
      filename: '[file].map',
      publicPath: '/',
      columns: true,
      module: true,
    }),

    // Provide ESLint support
    new ESLintPlugin({
      files: ['**/*.{mjs,js}'],
      lintDirtyModulesOnly: Settings.env.lintDirtyModulesOnly,
    }),

    // Provide Stylelint support
    new StyleLintPlugin({
      files: ['**/*.{scss,sass,css}'],
      lintDirtyModulesOnly: Settings.env.lintDirtyModulesOnly,
    }),

    new MiniCssExtractPlugin({
      filename: Settings.mode.prod ? 'css/[name].[contenthash].css' : 'css/[name].css',
    }),
  ]
}