wbpk.js

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

const webpack = require('webpack');
const merge = require('webpack-merge');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const hotMiddlewareScript = require('webpack-hot-middleware');
/**
 * 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: 'http://localhost:3000/' + config.publicPath,
        },
      }
    ],
  }],
}


/**
 * Webpack config
 */
let webpackConfig = {
  entry: {
    main: [
      'webpack-hot-middleware/client?noInfo=true&timeout=20000&reload=true',
      './assets/scripts/app.js',
      './assets/styles/style.scss'
    ]
  },
  mode: 'development',
  output: {
    filename: 'scripts/[name].js',
    path: config.paths.dist,
    publicPath: config.publicPath
  },
  module: loadModules,

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

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

  devtool: '#cheap-module-source-map',

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new BrowserSyncPlugin({
      host: 'localhost',
      port: 3000,
      proxy: config.devUrl,
      files: config.watch,
      delay: 500,
      open: false,
    },
    // plugin options
    {
      // Since we're using ExtractTextPlugin, the live reload
      // feature doesn't work
      reload: false
    }),
  ],
}

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