"use strict";

const webpack = require("webpack");
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
	watch: true,
	mode: "development",
	entry: {
		main: "./index.jsx"
	},
	output: {
		publicPath: "/",
		path: path.join(__dirname, "public/"),
		filename: "bundle.js"
	},
	module: {
		rules: [{
			test: /\.jsx?$/,
			exclude: /node_modules/,
			resolve: {
				extensions: [".js", ".jsx"]
			},
			use: [{
				loader: require.resolve("babel-loader"),
				query: {
					presets: [
						"es2015",
						"react"
					].map(item => require.resolve(`babel-preset-${item}`))
				}
			}]
		}, {
			test: /\.css$/,
			use: [{
				loader: MiniCssExtractPlugin.loader
			}, {
				loader: require.resolve("css-loader"),
				options: {
					// modules: true,
					sourceMap: true,
					// localIdentName: "[name]__[local]--[hash:base64:8]"
				}
			}]
		}]
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: "[name].css",
			chunkFilename: "[id].css"
		}),
		new webpack.HotModuleReplacementPlugin(),
		new webpack.NoEmitOnErrorsPlugin()
	],
	devtool: "source-map"
};