webpack.common.cjs

const path = require('path')

const CopyPlugin = require('copy-webpack-plugin')
const webpack = require('webpack')
//const HtmlPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const ESLintPlugin = require('eslint-webpack-plugin')

module.exports = {
	entry: {
		popup: './src/popup.ts',
		options: './src/options.ts',
	},
	module: {
		rules: [
			{
				test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/i,
				type: 'asset/resource',
				generator: {
					filename: 'fonts/[name][ext][query]',
				},
			},
			// {
			//   test: /\.ts?$/,
			//   use: 'ts-loader',
			//   exclude: /node_modules/,
			// },
			{
				test: /\.(js|ts)x?$/,
				use: ['babel-loader'],
				exclude: /node_modules/,
			},
			{
				test: /\.(jpg|jpeg|png|eot|ttf|svg)$/,
				type: 'asset/resource',
			},
			{
				test: /\.(scss|css)$/,
				use: [
					MiniCssExtractPlugin.loader,
					{
						loader: 'css-loader',
					},
					{
						loader: 'postcss-loader',
						options: {
							postcssOptions: {
								plugins: () => [autoprefixer],
							},
						},
					},
					{
						loader: 'sass-loader',
					},
				],
			},
		],
	},
	resolve: {
		extensions: ['.ts', '.js'],
	},
	output: {
		filename: '[name].js',
		path: path.resolve('dist'),
	},
	plugins: [
		new CopyPlugin({
			patterns: [
				{ from: 'static' },
				{ from: 'src/returns-plugin-production.js', to: 'returns-plugin-production.js' },
				{ from: 'src/returns-plugin-staging.js', to: 'returns-plugin-staging.js' },
				{ from: 'src/sherlock_script.js', to: 'sherlock_script.js' },
			],
		}),
		new webpack.ProvidePlugin({
			$: 'jquery',
			jQuery: 'jquery',
			//Popper: ['popper.js', 'default'],
		}),
		new MiniCssExtractPlugin({
			filename: 'styles/[name].css',
		}),
		new ESLintPlugin({
			extensions: ['js', 'ts'],
			fix: true,
			overrideConfigFile: path.resolve(__dirname, '.eslintrc'),
		}),
	],
}