webpack.base.conf.js

const path = require('path');
const utils = require('./utils');
const config = require('../config');
const { VueLoaderPlugin } = require('vue-loader');
const DirectoryNamedWebpackPlugin = require('directory-named-webpack-plugin');

function resolve(dir) {
  return path.join(__dirname, '..', dir)
}

function getHostingEnvironment() {
  switch (process.env.HOSTING_ENVIRONMENT) {
    case 'production':
      return 'environment.prd';
    case 'demo':
        return 'environment.demo';
    case 'e2e-mock':
      return 'environment.e2e-mock';
    case 'cit':
      return 'environment.cit';
    case 'testing':
    case 'development':
    default:
      return 'environment.dev'
  }
}

const createLintingRule = () => ({
  test: /\.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: 'pre',
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter'),
    emitWarning: !config.dev.showEslintErrorsInOverlay
  }
});

module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: ['./src/main.js'],
    vendor: ['vue', 'vuex', 'vue-router', 'qrcode.vue'],
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  performance: {
    maxAssetSize: 125000, // 125kB uncompressed
    maxEntrypointSize: 1500000, // 1.5MB uncompressed
    hints: utils.isProduction() ? 'warning' : false
  },
  resolve: {
    extensions: [
      '.js',
      '.vue',
      '.json'
    ],
    modules: [
      resolve('src'),
      resolve('node_modules')
    ],
    alias: {
      'vue$': 'vue/dist/vue.common.js',
      'api': resolve('src/services/api'),
      'assets': resolve('assets'),
      'components': resolve('src/components'),
      'environments/environment': resolve('src/environments/' + getHostingEnvironment()),
      'geofences': resolve('src/components/geofences'),
      'map': resolve('src/components/map'),
      'modals': resolve('src/components/modals'),
      'models': resolve('src/services/models'),
      'ui-state': resolve('src/services/ui-state'),
      'services': resolve('src/services'),
      'src': resolve('src'),
      'things': resolve('src/components/things'),
      'utils': resolve('src/utils'),
      'workspaces': resolve('src/components/workspaces'),
    },
    plugins: [
      new DirectoryNamedWebpackPlugin({
        honorIndex: false,
        transformFn: function (dirName) {
          // use this function to provide custom transforms of resolving directory name
          // return desired filename or array of filenames which will be used
          // one by one (honoring order) in attempts to resolve module
          return [dirName + '.vue', dirName + '.js']; // default
        }
      }),
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          transformAssetUrls: {
            video: ['src', 'poster'],
            source: 'src',
            img: 'src',
            image: 'xlink:href'
          }
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [
          resolve('src'),
          resolve('test'),
          resolve('node_modules/webpack-dev-server/client')
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:3].[ext]')
        }
      }
    ]
  },
  optimization: {
    occurrenceOrder: true,
    runtimeChunk: 'single',
    namedChunks: true,
    minimize: false,
    splitChunks: {
      cacheGroups: {
        // mapjscore: {
        //   test: /mapjs-core.js/,
        //   minSize: 1,
        //   name: true,
        //   chunks: "all",
        // },
        mapsapi: {
          test: /[\\/]maps-api-for-javascript[\\/]/,
          minSize: 10000,
          maxInitialRequests: 10,
          name: true,
          chunks: "all",
        },
        // mapsjsla: {
        //   test: /mapsjs-service|mapsjs-mapevents|mapsjs-clustering/,
        //   minSize: 10000,
        //   name: true,
        //   chunks: "all",
        // },
        moment: {
          test: /[\\/]moment[\\/]/,
          minSize: 10000,
          maxInitialRequests: 10,
          name: true,
          chunks: "all",
        },
        // tracking: {
        //   test: /[\\/]here-tracking[\\/]/,
        //   minSize: 10,
        //   name: true,
        //   chunks: "all",
        // },
        toolkit: {
          test: /[\\/]web-toolkit[\\/]/,
          minSize: 1,
          maxInitialRequests: 10,
          name: true,
          chunks: "all",
        },
      }
    },
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native).
    setImmediate: false,
    // prevent webpack from injecting mocks to Node native modules
    // that does not make sense for the client
    dgram: 'empty',
    fs: 'empty',
    net: 'empty',
    tls: 'empty',
    child_process: 'empty'
  }
};