webpack.config.js

const path = require('path')
const webpack = require('webpack')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const TypedocWebpackPlugin = require('typedoc-webpack-plugin')

const currentDir = path.resolve('.')
const excludeDirs = [
  path.resolve(__dirname, "node_modules"),
  path.resolve(__dirname, "node")
]

module.exports = {
  entry: { 
    api: './src/api.ts'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: 'dist/',
    filename: '[name].js',
    chunkFilename: '[name].js'
  },
  module: {
    rules: [{
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        loaders: {
          // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
          // the "scss" and "sass" values for the lang attribute to the right configs here.
          // other preprocessors should work out of the box, no loader config like this necessary.
          'scss': 'vue-style-loader!css-loader!sass-loader',
          'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
          'ts': [
            'ts-loader!tslint-loader',
            path.resolve('src/scripts/remove-whitespace-ts-loader.js')
          ]
        }
      },
      include: [ path.resolve(currentDir, 'src') ]
    },{
      test: /\.tsx?$/,
      loader: 'ts-loader',
      options: {
        appendTsSuffixTo: [/\.vue$/],
      },
      include: [ path.resolve(currentDir, 'src') ]
    },{
      test: /\.ts$/,
      enforce: 'pre',
      loader: 'tslint-loader'
    },{
      test: /\.(jpe?g|png|gif|svg|eot|woff|ttf|svg|woff2)$/,
      loader: "file-loader",
    },{
      test : /\.js$/,
      loader: 'babel-loader',
      include: [ path.resolve(currentDir, 'src') ]
    },{
      test: /\.css$/,
      loader: 'style-loader'
    },{
      test: /\.css$/,
      loader: 'css-loader'
    }]
  },
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    modules: [ //tell webpack where to search for import
      path.resolve(path.resolve('.'), 'src'), //allow importing file without starting by "src/"
      path.resolve(currentDir, 'node_modules')
    ]
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  optimization : {
    splitChunks: {
      cacheGroups: {
       vendor: {
        test: /node_modules/,
        chunks: 'initial',
        name: 'vendor',
        enforce: true
       },
      }
     }
  }
}

if (process.env.NODE_ENV === 'production') {
  // production environment
  console.log('Webpack will run in production mode')
  module.exports.mode = 'production'
  module.exports.devtool = '#source-map'
  module.exports.resolve.alias = {
    'vue': 'vue/dist/vue.min.js',
    'vuex': 'vuex/dist/vuex.min.js',
    'vuetify-css': 'vuetify/dist/vuetify.min.css'
  }
  Object.assign(module.exports.optimization, {
    minimize: true,
    minimizer: [
      new UglifyJsPlugin({
        sourceMap: true,
        uglifyOptions: {
          beautify: false,
          compress: {
            warnings: false
          },
          comments: false,
          mangle: false,
          toplevel: false,
          keep_classnames: true,
          keep_fnames: true,
        }
      })
    ]
  })
  module.exports.plugins = (module.exports.plugins || []).concat([
    new TypedocWebpackPlugin({
      out: '../doc',
      name: 'JMapWeb',
      mode: 'modules',
      exclude: '**/node_modules/**/*.*',
      experimentalDecorators: true,
      excludeExternals: true,
      includeDeclarations: false,
      ignoreCompilerErrors: true,
    })
  ])
} else {
  // development environment
  console.log('Webpack will run in development mode')
  module.exports.mode = 'development'
  module.exports.devtool = 'eval'
  module.exports.resolve.alias = {
    'vue': 'vue/dist/vue.esm.js',
    'vuex': 'vuex/dist/vuex.esm.js',
    'vuetify-css': 'vuetify/dist/vuetify.css'
  }
}

if (process.env.PROCESS_ANALYSER) {
  /**
   * Used to analyse the size/content of the bundles generated by webpack
   * After webpack build a browser tab will open automatically showing the result
   * */
  console.log('Bundle analyser will be performed, accessible on http://127.0.0.1:8888')
  module.exports.plugins = (module.exports.plugins || []).concat([
    new BundleAnalyzerPlugin()
  ])
}