import { resolve } from 'path' import { Configuration } from 'webpack' import HtmlWebpackPlugin from 'html-webpack-plugin' import MiniCssExtractPlugin from 'mini-css-extract-plugin' import postcssPresetEnv from 'postcss-preset-env' const config: Configuration = { mode: 'development', devtool: 'eval-source-map', entry: { app: resolve(__dirname, './index.tsx'), }, output: { path: resolve(__dirname, '../../../../dist/apps/gif-app/'), filename: '[name].js', }, optimization: { splitChunks: { chunks: 'all', }, }, resolve: { extensions: ['.ts', '.tsx', '.js', '.png'], }, module: { rules: [ { test: /\.ts(x?)$/, exclude: /node_modules/, use: 'ts-loader', }, { test: /\.css$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { importLoaders: 1, }, }, { loader: 'postcss-loader', options: { plugins: [ postcssPresetEnv({ stage: 2, }), ] } } ], }, { test: /\.(jpe?g|gif|png|svg)$/, use: ['file-loader'], }, ], }, plugins: [ new HtmlWebpackPlugin({ title: 'GIF App', hash: true, template: resolve(__dirname, './index.ejs'), filename: 'composer.html', }), new MiniCssExtractPlugin({ filename: '[name].css', }), ], } export default config