Personal Webpack Config

March 26, 2024

Util Functions

Personal Webpack Config

Thuta Sann

Thuta Sann

This is my personal webpack config


Share This Snippet To :

Personal wepback config

const path = require('path') const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin') const TerserPlugin = require('terser-webpack-plugin') javascript:(function () {var script=document.createElement('script');script.src="//cdn.jsdelivr.net/npm/eruda";document.body.appendChild(script); script.onload = function () { eruda.init() } })(); module.exports = { mode: 'production', cache: { type: 'filesystem', }, entry: { analyticDashboard: path.join(__dirname, 'app-react', 'apps', 'analytic-dashboard.tsx'), mentionUserList: path.join(__dirname, 'app-react', 'apps', 'mention-userList.tsx'), mentionChannelList: path.join(__dirname, 'app-react', 'apps', 'mention-channelList.tsx'), }, output: { path: path.join(__dirname, './app-frontend/dist/react-build'), filename: '[name].bundle.js', }, optimization: { splitChunks: { chunks: 'all', cacheGroups: { vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendor', chunks: 'initial', enforce: true, }, common: { name: 'common', minChunks: 3, // Minimum number of chunks that share a module before it's moved to common chunk (Adjust this value as needed) // enforce: true, // Create chunk regardless of the size of the chunk priority: -20, }, }, }, minimize: true, minimizer: [ new TerserPlugin({ extractComments: false, // Disable extracting comments to separate file }), ], }, resolve: { modules: [path.resolve(__dirname, 'src'), 'node_modules'], extensions: ['.js', '.jsx', '.ts', '.tsx'], plugins: [new TsconfigPathsPlugin()], }, devServer: { static: { directory: path.join(__dirname, './app-frontend/app/react-build'), }, port: 3001, }, plugins: [], module: { rules: [ { test: /\.(ts|tsx)$/, exclude: /node_modules/, use: [ { loader: 'babel-loader', }, { loader: 'ts-loader', }, ], }, { test: /\.(css|scss)$/, include: [ path.resolve(__dirname, 'app-react'), // Process CSS files in the 'src' directory ], exclude: [ path.resolve(__dirname, 'app-frontend'), // Exclude files in the 'excluded-folder' directory ], use: [ 'style-loader', 'css-loader', { loader: 'postcss-loader', options: { postcssOptions: { plugins: [['postcss-preset-env', {}]], }, }, }, ], }, ], }, }

Cookie

I baked some cookies that you have to accept, if you want to enjoy my portfolio.
In order to gather information and make improvements, I should use some third-party cookies too, Can I?