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 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 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

  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.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    }),
    new CopyWebpackPlugin([
      {
        context: componentPath,
        from: '**/*.html',
        to: distPath + '/components',
      },
    ]),
    new CopyWebpackPlugin([
      {
        context: imagesPath,
        from: '*.*',
        to: distPath + '/images',
      },
    ]),
    new CopyWebpackPlugin([
      {
        context: docsPath,
        from: '*.*',
        to: distPath + '/docs',
      },
    ])
  ]

  fs.readdirSync(pagesPath).forEach( (page) => {
    plugins.push(
      new HtmlWebpackPlugin({
        template: path.resolve(pagesPath, page),
        filename: path.resolve(distPath, page.substr(0, page.lastIndexOf(".")) + ".html")
      })
    )
  })



  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']
        },

        // HTML
        {
          test: /.*\.html?$/,
          use: {
            loader: 'html-loader',
            options: {
              attrs: ['link:href', 'script:src', 'img:src'],
              interpolate: true,
            },
          },
        }
      ]
    },
    plugins: plugins,
    devtool: false,
    performance: {
      maxEntrypointSize: 512000,
      maxAssetSize: 512000
    }
  }
}