webpack.wordpress.js

const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const StyleLintPlugin = require('stylelint-webpack-plugin')
const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin')
const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
const dotenv = require('dotenv').config({
  path: __dirname + '/.env'
})
const ESLintPlugin = require('eslint-webpack-plugin')

module.exports = {
  mode: 'development',
  devtool: 'inline-source-map',
  entry: {
    main: path.resolve(__dirname, 'src/scripts/index.js')
  },
  output: {
    path: path.resolve(
      __dirname,
      `dist-wp/wp-content/themes/${process.env.THEME_NAME}`
    ),
    filename: 'js/[name].js',
    publicPath: '../'
  },
  watchOptions: {
    ignored: ['node_modules', 'dist', 'dist-wp', 'composer', 'cache']
  },
  stats: {
    colors: true,
    hash: false,
    version: false,
    timings: true,
    assets: false,
    chunks: false,
    modules: false,
    reasons: false,
    children: false,
    source: false,
    errors: true,
    errorDetails: false,
    warnings: true,
    publicPath: false
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src/scripts/'),
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env'],
              plugins: [
                [
                  '@babel/plugin-transform-runtime',
                  {
                    regenerator: true
                  }
                ]
              ]
            }
          }
        ]
      },
      {
        test: /\.(sa|sc|c)ss$/,
        include: path.resolve(__dirname, 'src/styles/'),
        use: [
          'style-loader',
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              esModule: false
            }
          },
          {
            loader: 'css-loader',
            options: {
              sourceMap: true
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              postcssOptions: {
                config: path.join(__dirname, '/postcss.config.js')
              }
            }
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true
            }
          }
        ]
      },
      {
        test: /\.(woff|woff2)$/,
        include: path.resolve(__dirname, 'src/fonts/'),
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name].[ext]'
        }
      },
      {
        test: /\.svg$/,
        include: path.resolve(__dirname, 'src/icons/'),
        type: 'asset/resource',
        generator: {
          filename: 'icons/[name][ext]'
        },
        use: {
          loader: 'svgo-loader',
          options: {}
        }
      },
      {
        test: /\.(png|svg|jpe?g|gif)$/,
        include: path.resolve(__dirname, 'src/images/'),
        type: 'asset/resource',
        generator: {
          filename: 'images/[name][ext]'
        },
        use: {
          loader: 'image-webpack-loader',
          options: {
            mozjpeg: {
              progressive: true,
              quality: 65
            },
            optipng: {
              enabled: true
            },
            pngquant: {
              quality: [0.65, 0.9],
              speed: 4
            },
            gifsicle: {
              interlaced: false
            }
          }
        }
      }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': dotenv.parsed
    }),
    new SVGSpritemapPlugin(['src/icons/*.svg'], {
      output: {
        filename: 'icons/sprite.svg',
        chunk: {
          name: 'sprite.svg',
          keep: true
        },
        svgo: {}
      },
      sprite: {
        prefix: false
      },
      styles: {
        filename: 'src/styles/vendor/sprite.scss'
      }
    }),
    new webpack.HotModuleReplacementPlugin(),
    new CleanWebpackPlugin({
      cleanStaleWebpackAssets: false
    }),
    new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'src/static'),
          to: path.resolve(
            __dirname,
            `dist-wp/wp-content/themes/${process.env.THEME_NAME}`
          ),
          force: true
        },
        {
          from: path.resolve(__dirname, 'wordpress/theme'),
          to: path.resolve(
            __dirname,
            `dist-wp/wp-content/themes/${process.env.THEME_NAME}`
          ),
          force: true
        },
        {
          from: path.resolve(__dirname, 'wordpress/config/*.php'),
          to: path.resolve(__dirname, 'dist-wp/[name][ext]'),
          force: true
        },
        {
          from: path.resolve(__dirname, 'wordpress/config/.htaccess'),
          to: path.resolve(__dirname, 'dist-wp/')
        },
        {
          from: path.resolve(__dirname, 'dist-wp/wp-content/uploads/'),
          to: path.resolve(__dirname, 'wordpress/uploads/'),
          toType: 'dir',
          noErrorOnMissing: true,
          force: true
        }
      ]
    }),
    new MiniCssExtractPlugin({
      filename: 'css/main.css'
    }),
    new StyleLintPlugin(),
    new BrowserSyncPlugin({
      files: [
        'dist/**/*.css',
        'dist/**/*.js',
        'dist-wp/wp-content/themes/**/*.css',
        'dist-wp/wp-content/themes/**/*.js',
        'wordpress/**/*.php'
      ],
      ignore: 'sprite.php',
      proxy: process.env.THEME_URL,
      open: false,
      https: {
        cert: 'certs/cert.pem',
        key: 'certs/privkey.pem'
      },
      injectCss: true,
      notify: false,
      ghostMode: {
        clicks: false,
        forms: false,
        scroll: false
      },
      watchOptions: {
        ignored: ['sprite.php']
      },
      logLevel: 'silent'
    }),
    new webpack.optimize.LimitChunkCountPlugin({
      maxChunks: 1
    }),
    new ESLintPlugin()
  ]
}