Skip to content

Instantly share code, notes, and snippets.

@mucahitgurbuz
Created April 14, 2021 07:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mucahitgurbuz/244cb90068c19afb141fd7c22a88c924 to your computer and use it in GitHub Desktop.
Save mucahitgurbuz/244cb90068c19afb141fd7c22a88c924 to your computer and use it in GitHub Desktop.
Webpack 5 Config Example for Typescript, ReactJS
const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const resolve = require('resolve');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
const TerserPlugin = require('terser-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
const paths = require('./paths');
const getClientEnvironment = require('./env');
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const ESLintPlugin = require('eslint-webpack-plugin');
const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
const useTypeScript = fs.existsSync(paths.appTsConfig);
module.exports = function(webpackEnv) {
const isEnvDevelopment = webpackEnv === 'development';
const isEnvProduction = webpackEnv === 'production';
const publicPath = isEnvProduction ? paths.servedPath : isEnvDevelopment && '/';
const publicUrl = isEnvProduction ? publicPath.slice(0, -1) : isEnvDevelopment && '';
const env = getClientEnvironment(publicUrl);
const babelLoader = {
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve('babel-preset-react-app/webpack-overrides'),
plugins: [
[
require.resolve('babel-plugin-named-asset-import'),
{
loaderMap: {
svg: {
ReactComponent: '@svgr/webpack?-svgo![path]',
},
},
},
],
],
cacheDirectory: true,
cacheCompression: isEnvProduction,
compact: isEnvProduction,
},
};
return {
mode: isEnvProduction ? 'production' : 'development',
bail: isEnvProduction,
devtool: isEnvProduction ? (shouldUseSourceMap ? 'source-map' : false) : isEnvDevelopment && 'eval-source-map',
output: {
path: paths.appBuild,
pathinfo: isEnvDevelopment,
filename: isEnvDevelopment ? 'static/js/[name].js' : 'static/js/[name].[contenthash:8].js',
chunkFilename: isEnvProduction
? 'static/js/[name].[contenthash:8].chunk.js'
: isEnvDevelopment && 'static/js/[name].chunk.js',
publicPath: publicPath,
devtoolModuleFilenameTemplate: isEnvProduction
? info => path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, '/')
: isEnvDevelopment && (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
},
optimization: {
minimize: isEnvProduction,
minimizer: [
new TerserPlugin({
terserOptions: {
parse: {
ecma: 8,
},
compress: {
ecma: 5,
warnings: false,
comparisons: false,
inline: 2,
},
mangle: {
safari10: true,
},
output: {
ecma: 5,
comments: false,
ascii_only: true,
},
},
parallel: true,
}),
],
splitChunks: {
chunks: 'all',
},
runtimeChunk: true,
},
resolve: {
modules: ['node_modules'].concat(process.env.NODE_PATH.split(path.delimiter).filter(Boolean)),
extensions: paths.moduleFileExtensions.map(ext => `.${ext}`).filter(ext => useTypeScript || !ext.includes('ts')),
alias: {
'react-native': 'react-native-web',
'styled-components': path.resolve('node_modules', 'styled-components'),
react: require.resolve('react'),
'@oplog/express': require.resolve('@oplog/express'),
},
plugins: [],
fallback: {
fs: false,
crypto: false,
process: false,
module: false,
clearImmediate: false,
setImmediate: false,
util: false,
},
},
module: {
strictExportPresence: true,
rules: [
{
oneOf: [
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
type: 'asset/inline',
generator: {
filename: 'static/media/[name].[contenthash:8].[ext]',
},
},
{
test: /\.(ts|tsx)$/,
include: paths.appSrc,
use: [
babelLoader,
{
loader: 'ts-loader',
},
],
},
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
use: [babelLoader],
},
{
test: /\.(js|mjs)$/,
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve('babel-loader'),
options: {
babelrc: false,
configFile: false,
compact: false,
presets: [[require.resolve('babel-preset-react-app/dependencies'), { helpers: true }]],
cacheDirectory: true,
cacheCompression: isEnvProduction,
sourceMaps: false,
},
},
{
exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.less$/, /\.html$/, /\.json$/],
type: 'asset/resource',
generator: {
filename: 'static/media/[name].[contenthash:8].[ext]',
},
},
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: 'static/css/[name].[contenthash:8].css',
}),
new HtmlWebpackPlugin(
Object.assign(
{},
{
inject: true,
template: paths.appHtml,
},
isEnvProduction
? {
minify: {
removeComments: true,
collapseWhitespace: true,
removeRedundantAttributes: true,
useShortDoctype: true,
removeEmptyAttributes: true,
removeStyleLinkTypeAttributes: true,
keepClosingSlash: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
},
}
: undefined
)
),
new ESLintPlugin({
formatter: require.resolve('react-dev-utils/eslintFormatter'),
eslintPath: require.resolve('eslint'),
}),
isEnvProduction && shouldInlineRuntimeChunk && new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime~.+[.]js/]),
new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
new ModuleNotFoundPlugin(paths.appPath),
new webpack.DefinePlugin(env.stringified),
isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
isEnvDevelopment && new CaseSensitivePathsPlugin(),
isEnvDevelopment && new WatchMissingNodeModulesPlugin(paths.appNodeModules),
isEnvProduction &&
new MiniCssExtractPlugin({
filename: 'static/css/[name].[contenthash:8].css',
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
}),
new WebpackManifestPlugin({
fileName: 'asset-manifest.json',
publicPath: publicPath,
}),
new webpack.IgnorePlugin({
resourceRegExp: /^\.\/locale$/,
contextRegExp: /moment$/,
}),
useTypeScript &&
new ForkTsCheckerWebpackPlugin({
typescript: {
configOverwrite: {
compilerOptions: {
module: 'esnext',
moduleResolution: 'node',
resolveJsonModule: true,
isolatedModules: true,
noEmit: true,
jsx: 'preserve',
},
},
configFile: paths.appTsConfig,
typescriptPath: resolve.sync('typescript', {
basedir: path.appNodeModules,
}),
},
async: false,
logger: { infrastructure: 'silent', issues: 'console', devServer: true },
formatter: typescriptFormatter,
}),
// new BundleAnalyzerPlugin(),
].filter(Boolean),
performance: false,
infrastructureLogging: {
level: 'warn',
},
};
};
@shivchand
Copy link

Hi
mucahitgurbuz
const paths = require('./paths');

This is giving error module not found.

if you provide more details and also share package.json will be great help.

@geraldlopez24
Copy link

do you have packake.json for this? I'm getting that typescriptFormatter is not found

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment