Created
January 9, 2022 22:44
-
-
Save rajeshdavidbabu/fc8576ea86ecd30046cce63515f94dc0 to your computer and use it in GitHub Desktop.
Webpack prod config for React TS project
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import path from 'path'; | |
import { Configuration } from 'webpack'; | |
import HtmlWebpackPlugin from 'html-webpack-plugin'; | |
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; | |
import ESLintPlugin from 'eslint-webpack-plugin'; | |
import { CleanWebpackPlugin } from 'clean-webpack-plugin'; | |
import 'webpack-dev-server'; // Imported just to avoid type error in configuration | |
const config: Configuration = { | |
mode: 'production', | |
entry: './src/index.tsx', | |
output: { | |
path: path.resolve(__dirname, 'build'), | |
filename: '[name].[contenthash].js', | |
publicPath: './', // outputs js-bundle relative to html path | |
}, | |
module: { | |
rules: [ | |
{ | |
test: /\.(ts|js)x?$/i, | |
exclude: /node_modules/, | |
use: { | |
loader: 'babel-loader', // Using babel-loader to load files using .babelrc configs. | |
}, | |
}, | |
], | |
}, | |
resolve: { | |
extensions: ['.tsx', '.ts', '.js', '.jsx'], | |
}, | |
plugins: [ | |
new HtmlWebpackPlugin({ | |
template: './public/index.html', | |
}), | |
new ForkTsCheckerWebpackPlugin({ | |
async: false, | |
}), | |
new ESLintPlugin({ | |
extensions: ['js', 'jsx', 'ts', 'tsx'], | |
}), | |
new CleanWebpackPlugin({ | |
// Removes existing build folder everytime a new build is trigerred. | |
cleanOnceBeforeBuildPatterns: [path.resolve(__dirname, 'build/**')], | |
verbose: true, | |
}), | |
], | |
}; | |
export default config; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment