const webpack = require('webpack');
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {

	module: {
		rules: [
			{
				test: /\.vue$/,
				loader: 'vue-loader'
			}, {
				test: /\.css$/,
				use: ['style-loader', 'css-loader']
			}, {
				test: /\.(scss)$/,
				use: [
					{
						loader: 'style-loader', // inject CSS to page
					}, {
						loader: 'css-loader', // translates CSS into CommonJS modules
					}, {
						loader: 'postcss-loader', // Run post css actions
						options: {
							plugins: function () { // post css plugins, can be exported to postcss.config.js
								return [
									require('precss'),
									require('autoprefixer')
								];
							}
						}
					}, {
						loader: 'sass-loader' // compiles Sass to CSS
					}
				]
			},
		]
	},
	mode: 'development',
	entry: [
		'./src/app.js',
		'./src/app.css',
	],
	output: {
		path: path.resolve(__dirname, 'public'),
		filename: 'app.js',
	},
	plugins: [
		// make sure to include the plugin!
		new VueLoaderPlugin(),
		new webpack.ProvidePlugin({
			$: 'jquery',
			jQuery: 'jquery',
			ImageZoom: 'js-image-zoom',
		}),
	]
};