dev.js

const path = require('path');
const config = require('./config');

const webpack = require('webpack');
const merge = require('webpack-merge');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

/**
 * Modules
 */
const loadModules = {
  rules: [
  {
    enforce: 'pre',
    test: /\.js?$/,
    include: config.paths.assets,
    use: 'eslint',
  },
  {
    enforce: 'pre',
    test: /\.(js|s?[ca]ss)$/,
    include: config.paths.assets,
    loader: 'import-glob',
  },
  {
    test: /\.js$/,
    exclude: [/(node_modules|lib|vendor)/],
    include: config.paths.assets,
    use: {
      loader: 'babel-loader'
    }
  },
  {
    test: /\.css$/,
    include: config.paths.assets,
    use: [
      'cache',
      'style-loader',
      { loader: 'css', options: { sourceMap: config.enabled.production } },
      {
        loader: 'postcss', options: {
          config: { path: __dirname, ctx: config },
          sourceMap: config.enabled.production,
        },
      },
    ],
  },
  {
    test: /\.scss$/,
    include: config.paths.assets,
    use: [
      'style-loader',
      { loader: 'css', options: { sourceMap: config.enabled.production } },
      {
        loader: 'postcss', options: {
          config: { path: __dirname, ctx: config },
          sourceMap: config.enabled.production,
        },
      },
      { loader: 'resolve-url', options: { sourceMap: config.enabled.production } },
      'sass',
      'import-glob',
    ],
  },
  {
    test: /\.(ttf|otf|eot|woff2?|png|jpe?g|gif|svg|ico)$/,
    use: [
      {
        loader: 'file',
        options: {
          name: `[path]${config.fileName}.[ext]`,
          publicPath: '../',
        },
      }
    ],
  }],
}

const proxyConfig = {
  target: config.devUrl,
  ignorePath: false,
  changeOrigin: true,
  secure: false
}


/**
 * Webpack config
 */
let webpackConfig = {
  entry: {
    main: [
      './assets/scripts/app.js',
      './assets/styles/style.scss'
    ]
  },
  mode: 'development',
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: loadModules,

  resolve: {
    modules: [
      config.paths.assets,
      'node_modules',
    ],
    enforceExtension: false,
  },

  resolveLoader: {
    moduleExtensions: ['-loader'],
  },

  devtool: '#cheap-module-source-map',
  devServer: {
    hot: true,
    open: true,
    historyApiFallback: true,
    compress: true,
    port: 9000,
    publicPath: config.publicPath,
    contentBase: config.paths.dist,
    proxy: {
      '**': {
        target: config.devUrl,
        secure: false
      },
    },
  },

  plugins: [
    new CleanWebpackPlugin(['dist']),
    new webpack.NamedModulesPlugin(),
    new HtmlWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin(),
  ],
}

/**
 * Export final config
 */
module.exports = webpackConfig;