const webpack = require('webpack');
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const autoprefixer = require('autoprefixer');
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
	entry: {
		bundle: './assets/js/main.js',
	},
	output: {
		filename: '[name].js',
		path: path.join(__dirname, 'public/js'),
	},
	module: {
		rules: [
			{
				test: /\.vue$/,
				include: [
					path.resolve(__dirname, 'assets'),
				],
				loader: 'vue-loader',
				options: {
					preserveWhitespace: false,
				},
			},
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: [
					{
						loader: 'babel-loader',
						options: {
							babelrc: false,
							plugins: [
								'@babel/plugin-proposal-object-rest-spread',
							],
						},
					},
				],
			},
			{
				test: /\.s?css$/,
				use: [
					MiniCssExtractPlugin.loader,
					{
						loader: 'css-loader',
						options: {
							sourceMap: true,
							url: false,
						},
					},
					{
						loader: 'postcss-loader',
						options: {
							postcssOptions: {
								plugins: [autoprefixer],
							},
							sourceMap: true,
						},
					},
					{
						loader: 'sass-loader',
						options: {
							sourceMap: true,
							additionalData: '@import "assets/css/_breakpoints.scss";',
						},
					},
				],
			},
			{
				test: /\.svg/,
				use: 'raw-loader',
			},
		],
	},
	plugins: [
		new VueLoaderPlugin(),
		new ESLintPlugin(),
		new MiniCssExtractPlugin({
			filename: '../css/style.css',
		}),
		new webpack.DefinePlugin({
			VERSION: JSON.stringify(process.env.npm_package_version),
		}),
	],
	resolve: {
		alias: {
			theme: path.join(__dirname, 'assets/css/_theme.scss'),
			breakpoints: path.join(__dirname, 'assets/css/_breakpoints.scss'),
			config: path.join(__dirname, `assets/js/config/${process.env.NODE_ENV || 'default'}.js`),
			vue: 'vue/dist/vue.esm-bundler.js',
		},
	},
};