iolovolio/webpack.config.js

const webpack = require('webpack')
const path = require('path')
const fs = require('fs')

const WebpackNotifierPlugin = require('webpack-notifier')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const Handlebars = require('handlebars')

const basePath = './'
const pagesPath = path.join(__dirname, './pages')
const distPath = path.join(__dirname, './public')
const componentPath = path.join(__dirname, './components')
const imagesPath = path.join(__dirname, './images')
const binsPath = path.join(__dirname, './cgi-bin')
const apisPath = path.join(__dirname, './api')
const adminPath = path.join(__dirname, './admin')
const assetsPath = path.join(__dirname, './assets')
const docsPath = path.join(__dirname, './docs')
const srcPath = './src'

let components = []
let entries = []
let plugins = []

module.exports = (env) => {

  const isProd = env && env.prod || false
  const dotenv = require('dotenv').config({path: __dirname + `/.env${isProd ? '_prod' : ''}`});

  entries.push(srcPath + '/js/index.js')
  entries.push(srcPath + '/scss/main.scss')

  fs.readdirSync(componentPath).forEach( (comp) => {
    entries.push(componentPath + '/' + comp + '/' + comp + '.js')
  })

  plugins = [
    new HtmlWebpackPlugin(),
    new WebpackNotifierPlugin({
      title: 'IoLovOlio',
      contentImage: path.join(__dirname, basePath + '/images/logoWP.png'),
      alwaysNotify: true
    }),
    new webpack.DefinePlugin({
      "ENV": JSON.stringify(dotenv.parsed)
    }),
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    new CopyWebpackPlugin({
      patterns: [
        {
          context: componentPath,
          from: '**/*.html',
          to: distPath + '/components/[path]/[name].php',
        },
        {
          context: imagesPath,
          from: '*.*',
          to: distPath + '/images',
        },
        {
          context: imagesPath,
          from: '**/*.*',
          to: distPath + '/images',
        },
        {
          context: binsPath,
          from: '*.*',
          to: distPath + '/cgi-bin',
        },
        {
          context: apisPath,
          from: '**/*',
          to: distPath + '/api',
        },
        {
          context: adminPath,
          from: '*.*',
          to: distPath + '/admin',
        }
      ]
    })
  ]

  fs.readdirSync(pagesPath).forEach( (page) => {
    if(page == '.htaccess') {
      plugins.push(
        new CopyWebpackPlugin({
          patterns: [
            {
              context: pagesPath,
              from: '.htaccess',
              to: distPath
            }
          ]
        })
      )
    } else {
      plugins.push(
        new HtmlWebpackPlugin({
          template: path.resolve(pagesPath, page),
          filename: path.resolve(distPath, page.substr(0, page.lastIndexOf(".")) + ".php"),
          inject: page == 'index.ejs'
        })
      )
    }
  })



  return {
    devtool: isProd ? '' : 'eval',
    entry: entries,
    output: {
      path: path.join(distPath, '/assets/js'),
      publicPath: '/assets/js',
      filename: 'bundle.js'
    },
    module: {
      rules: [
        // JS
        {
          test: /\.js$/,
          exclude: /(node_modules|bower_components|vendor)/,
          use: {
            loader: 'babel-loader',
            options: {
              minified: false,
              babelrc: true
            }
          },
        },
        // SCSS
        {
          test: /\.scss$/,
          use: [
            {loader: 'file-loader',
              options: { name: '../../assets/css/styles.css'}
            },
            {loader: 'extract-loader'},
            {loader: 'css-loader'},
            {loader: 'postcss-loader'},
            {loader: 'sass-loader'}
          ]
        },

        // FONTS
        {
          test: /\.(woff|woff2|eot|ttf|svg)$/,
          use: ['url-loader?limit=100000']
        },

        // IMAGES
        {
          test: /\.(jpg|jpeg|gif|png)$/,
          use: ['url-loader?limit=100000']
        },

        // HTML
        {
          test: /\.html$/i,
          loader: 'html-loader',
          options: {
            attributes: {
              list: [
                { tag: 'img', attribute: 'data-src', type: 'src'},
                { tag: 'img', attribute: 'data-srcset', type: 'srcset'}
              ],
              root: '.'
            }
          }
        }
      ]
    },
    plugins: plugins,
    devtool: false,
    performance: {
      maxEntrypointSize: 512000,
      maxAssetSize: 512000
    }
  }
}