const path = require('path'); const AssetsManifestPlugin = require('webpack-assets-manifest'); const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin'); const TerserPlugin = require('terser-webpack-plugin'); const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const isProduction = process.env.NODE_ENV === 'production'; module.exports = { cache: true, target: 'web', mode: process.env.NODE_ENV, context: __dirname, devtool: isProduction ? false : (process.env.DEVTOOL || 'eval-source-map'), performance: { hints: false, }, entry: ['react-hot-loader/patch', './resources/scripts/index.tsx'], output: { path: path.resolve(__dirname, '/public/assets'), filename: isProduction ? 'bundle.[chunkhash:8].js' : 'bundle.[hash:8].js', chunkFilename: isProduction ? '[name].[chunkhash:8].js' : '[name].[hash:8].js', publicPath: (process.env.PUBLIC_PATH || '') + '/assets/', crossOriginLoading: 'anonymous', }, module: { rules: [ { test: /\.ts(x?)$/, exclude: /node_modules/, loader: 'babel-loader', options: { cacheDirectory: !isProduction, }, }, { test: /\.css$/, use: [ 'style-loader', 'css-loader' ], }, { test: /\.(png|jpe?g|gif)$/, loader: 'file-loader', options: { name: 'images/[name].[hash].[ext]', }, }, { test: /\.svg$/, loader: 'svg-url-loader', } // { // enforce: 'pre', // test: /\.js$/, // loader: 'source-map-loader', // }, ], }, resolve: { extensions: ['.ts', '.tsx', '.js', '.json'], alias: { '@': path.resolve(__dirname, 'resources/scripts'), }, symlinks: false, }, plugins: [ new AssetsManifestPlugin({ writeToDisk: true, publicPath: true, integrity: true, integrityHashes: ['sha384'] }), !isProduction ? new ForkTsCheckerWebpackPlugin({ eslint: { files: './resources/scripts/**/*.{ts,tsx}', }, }) : null, process.env.ANALYZE_BUNDLE ? new BundleAnalyzerPlugin() : null ].filter(p => p), optimization: { usedExports: true, sideEffects: false, runtimeChunk: false, removeEmptyChunks: true, minimize: isProduction, minimizer: [ new TerserPlugin({ cache: true, parallel: true, extractComments: false, terserOptions: { mangle: true, output: { comments: false, }, }, }), ], }, watchOptions: { poll: 1000, ignored: /node_modules/, }, devServer: { compress: true, contentBase: 'public', publicPath: (process.env.PUBLIC_PATH || '') + '/assets/', allowedHosts: [ '.pterodactyl.test', ], headers: { 'Access-Control-Allow-Origin': '*', }, }, };