diff --git a/.browserslistrc b/.browserslistrc index b5645f4..a4ef820 100644 --- a/.browserslistrc +++ b/.browserslistrc @@ -1,5 +1,8 @@ -# Browsers that we support - +[production] defaults - not IE 11 + +[development] +last 2 Chrome versions +last 2 Firefox versions +last 2 Safari versions diff --git a/config/build/buildPlugins.ts b/config/build/buildPlugins.ts index cf51d74..bdd5667 100644 --- a/config/build/buildPlugins.ts +++ b/config/build/buildPlugins.ts @@ -14,23 +14,17 @@ export function buildPlugins({ apiUrl, project, }: BuildOptions): webpack.WebpackPluginInstance[] { + const isProd = !isDev; const plugins = [ new HTMLWebpackPlugin({ template: paths.html, }), new webpack.ProgressPlugin(), - new MiniCssExtractPlugin({ - filename: "css/[name].[contenthash:8].css", - chunkFilename: "css/[name].[contenthash:8].css", - }), new webpack.DefinePlugin({ __IS_DEV__: JSON.stringify(isDev), __API__: JSON.stringify(apiUrl), __PROJECT__: JSON.stringify(project), }), - new CopyPlugin({ - patterns: [{ from: paths.locales, to: paths.buildLocales }], - }), new ForkTsCheckerWebpackPlugin({ typescript: { diagnosticOptions: { @@ -53,5 +47,19 @@ export function buildPlugins({ ); } + if (isProd) { + plugins.push( + new MiniCssExtractPlugin({ + filename: "css/[name].[contenthash:8].css", + chunkFilename: "css/[name].[contenthash:8].css", + }) + ); + plugins.push( + new CopyPlugin({ + patterns: [{ from: paths.locales, to: paths.buildLocales }], + }) + ); + } + return plugins; } diff --git a/config/build/buildWebpackConfig.ts b/config/build/buildWebpackConfig.ts index 39de97d..dddb792 100644 --- a/config/build/buildWebpackConfig.ts +++ b/config/build/buildWebpackConfig.ts @@ -28,7 +28,7 @@ export function BuildWebpackConfig( plugins: buildPlugins(options), mode: mode, - devtool: isDev ? "inline-source-map" : undefined, + devtool: isDev ? "eval-cheap-module-source-map" : undefined, devServer: isDev ? buildDevServer(options) : undefined, }; } diff --git a/config/build/loaders/buildBabelLoader.ts b/config/build/loaders/buildBabelLoader.ts index 8d62bf7..b9b44dc 100644 --- a/config/build/loaders/buildBabelLoader.ts +++ b/config/build/loaders/buildBabelLoader.ts @@ -6,17 +6,21 @@ export interface BuildBabelLoaderProps extends BuildOptions { } export const buildBabelLoader = ({ isDev, isTsx }: BuildBabelLoaderProps) => { + const isProd = !isDev; + return { test: isTsx ? /\.(jsx|tsx)$/ : /\.(js|ts)$/, exclude: /node_modules/, use: { loader: "babel-loader", options: { + cacheDirectory: true, presets: ["@babel/preset-env"], plugins: [ ["@babel/plugin-transform-typescript", { isTsx }], "@babel/plugin-transform-runtime", - isTsx && [babelRemovePropsPlugin, { props: ["data-testid"] }], + isTsx && + isProd && [babelRemovePropsPlugin, { props: ["data-testid"] }], isDev && require.resolve("react-refresh/babel"), ].filter(Boolean), }, diff --git a/config/build/loaders/buildCssLoader.ts b/config/build/loaders/buildCssLoader.ts index 5aa9981..c06525b 100644 --- a/config/build/loaders/buildCssLoader.ts +++ b/config/build/loaders/buildCssLoader.ts @@ -1,22 +1,23 @@ import MiniCssExtractPlugin from "mini-css-extract-plugin"; export const buildCssLoader = (isDev: boolean) => { - return { - test: /\.s[ac]ss$/i, - use: [ - isDev ? "style-loader" : MiniCssExtractPlugin.loader, - { - loader: "css-loader", - options: { - modules: { - auto: /\.module\.\w+$/i, - localIdentName: isDev - ? "[path][name]__[local]--[hash:base64:5]" - : "[hash:base64:8]", - }, - }, - }, - "sass-loader", - ], - }; -} \ No newline at end of file + return { + test: /\.s[ac]ss$/i, + exclude: /node_modules/, + use: [ + isDev ? "style-loader" : MiniCssExtractPlugin.loader, + { + loader: "css-loader", + options: { + modules: { + auto: /\.module\.\w+$/i, + localIdentName: isDev + ? "[path][name]__[local]--[hash:base64:5]" + : "[hash:base64:8]", + }, + }, + }, + "sass-loader", + ], + }; +};