Skip to content

Instantly share code, notes, and snippets.

@gkatsanos
Created May 4, 2018 09:48
Show Gist options
  • Save gkatsanos/7c677f83eb21ad525b76192bbead330a to your computer and use it in GitHub Desktop.
Save gkatsanos/7c677f83eb21ad525b76192bbead330a to your computer and use it in GitHub Desktop.
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'
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment