123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674 |
- 'use strict';
-
- const fs = require('fs');
- const path = require('path');
- const webpack = require('webpack');
- const resolve = require('resolve');
- const PnpWebpackPlugin = require('pnp-webpack-plugin');
- 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 OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
- const safePostCssParser = require('postcss-safe-parser');
- const ManifestPlugin = require('webpack-manifest-plugin');
- const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
- const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
- const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
- const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
- const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
- const paths = require('./paths');
- const modules = require('./modules');
- const getClientEnvironment = require('./env');
- const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
- const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
- const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
-
- const postcssNormalize = require('postcss-normalize');
-
- const appPackageJson = require(paths.appPackageJson);
-
-
- const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
-
-
- const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
-
- const imageInlineSizeLimit = parseInt(
- process.env.IMAGE_INLINE_SIZE_LIMIT || '10000'
- );
-
-
- const useTypeScript = fs.existsSync(paths.appTsConfig);
-
-
- const cssRegex = /\.css$/;
- const cssModuleRegex = /\.module\.css$/;
- const sassRegex = /\.(scss|sass)$/;
- const sassModuleRegex = /\.module\.(scss|sass)$/;
-
-
-
- module.exports = function(webpackEnv) {
- const isEnvDevelopment = webpackEnv === 'development';
- const isEnvProduction = webpackEnv === 'production';
-
-
-
- const isEnvProductionProfile =
- isEnvProduction && process.argv.includes('--profile');
-
-
-
-
- const publicPath = isEnvProduction
- ? paths.servedPath
- : isEnvDevelopment && '/';
-
-
- const shouldUseRelativeAssetPaths = publicPath === './';
-
-
-
-
- const publicUrl = isEnvProduction
- ? publicPath.slice(0, -1)
- : isEnvDevelopment && '';
-
- const env = getClientEnvironment(publicUrl);
-
-
- const getStyleLoaders = (cssOptions, preProcessor) => {
- const loaders = [
- isEnvDevelopment && require.resolve('style-loader'),
- isEnvProduction && {
- loader: MiniCssExtractPlugin.loader,
- options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
- },
- {
- loader: require.resolve('css-loader'),
- options: cssOptions,
- },
- {
-
-
-
- loader: require.resolve('postcss-loader'),
- options: {
-
-
- ident: 'postcss',
- plugins: () => [
- require('postcss-flexbugs-fixes'),
- require('postcss-preset-env')({
- autoprefixer: {
- flexbox: 'no-2009',
- },
- stage: 3,
- }),
-
-
-
- postcssNormalize(),
- ],
- sourceMap: isEnvProduction && shouldUseSourceMap,
- },
- },
- ].filter(Boolean);
- if (preProcessor) {
- loaders.push(
- {
- loader: require.resolve('resolve-url-loader'),
- options: {
- sourceMap: isEnvProduction && shouldUseSourceMap,
- },
- },
- {
- loader: require.resolve(preProcessor),
- options: {
- sourceMap: true,
- },
- }
- );
- }
- return loaders;
- };
-
- return {
- mode: isEnvProduction ? 'production' : isEnvDevelopment && 'development',
-
- bail: isEnvProduction,
- devtool: isEnvProduction
- ? shouldUseSourceMap
- ? 'source-map'
- : false
- : isEnvDevelopment && 'cheap-module-source-map',
-
-
- entry: [
-
-
-
-
-
-
-
-
-
-
- isEnvDevelopment &&
- require.resolve('react-dev-utils/webpackHotDevClient'),
-
- paths.appIndexJs,
-
-
-
- ].filter(Boolean),
- output: {
-
- path: isEnvProduction ? paths.appBuild : undefined,
-
- pathinfo: isEnvDevelopment,
-
-
- filename: isEnvProduction
- ? 'static/js/[name].[contenthash:8].js'
- : isEnvDevelopment && 'static/js/bundle.js',
-
- futureEmitAssets: true,
-
- 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, '/')),
-
-
- jsonpFunction: `webpackJsonp${appPackageJson.name}`,
-
-
- globalObject: 'this',
- },
- optimization: {
- minimize: isEnvProduction,
- minimizer: [
-
- new TerserPlugin({
- terserOptions: {
- parse: {
-
-
-
-
-
- ecma: 8,
- },
- compress: {
- ecma: 5,
- warnings: false,
-
-
-
-
- comparisons: false,
-
-
-
-
- inline: 2,
- },
- mangle: {
- safari10: true,
- },
-
- keep_classnames: isEnvProductionProfile,
- keep_fnames: isEnvProductionProfile,
- output: {
- ecma: 5,
- comments: false,
-
-
- ascii_only: true,
- },
- },
- sourceMap: shouldUseSourceMap,
- }),
-
- new OptimizeCSSAssetsPlugin({
- cssProcessorOptions: {
- parser: safePostCssParser,
- map: shouldUseSourceMap
- ? {
-
-
- inline: false,
-
-
- annotation: true,
- }
- : false,
- },
- }),
- ],
-
-
-
- splitChunks: {
- chunks: 'all',
- name: false,
- },
-
-
-
- runtimeChunk: {
- name: entrypoint => `runtime-${entrypoint.name}`,
- },
- },
- resolve: {
-
-
-
-
- modules: ['node_modules', paths.appNodeModules].concat(
- modules.additionalModulePaths || []
- ),
-
-
-
-
-
-
- extensions: paths.moduleFileExtensions
- .map(ext => `.${ext}`)
- .filter(ext => useTypeScript || !ext.includes('ts')),
- alias: {
-
-
- 'react-native': 'react-native-web',
-
- ...(isEnvProductionProfile && {
- 'react-dom$': 'react-dom/profiling',
- 'scheduler/tracing': 'scheduler/tracing-profiling',
- }),
- ...(modules.webpackAliases || {}),
- },
- plugins: [
-
-
- PnpWebpackPlugin,
-
-
-
-
-
- new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
- ],
- },
- resolveLoader: {
- plugins: [
-
-
- PnpWebpackPlugin.moduleLoader(module),
- ],
- },
- module: {
- strictExportPresence: true,
- rules: [
-
- { parser: { requireEnsure: false } },
-
-
-
- {
- test: /\.(js|mjs|jsx|ts|tsx)$/,
- enforce: 'pre',
- use: [
- {
- options: {
- cache: true,
- formatter: require.resolve('react-dev-utils/eslintFormatter'),
- eslintPath: require.resolve('eslint'),
- resolvePluginsRelativeTo: __dirname,
-
- },
- loader: require.resolve('eslint-loader'),
- },
- ],
- include: paths.appSrc,
- },
- {
-
-
-
- oneOf: [
-
-
-
- {
- test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
- loader: require.resolve('url-loader'),
- options: {
- limit: imageInlineSizeLimit,
- name: 'static/media/[name].[hash:8].[ext]',
- },
- },
-
-
- {
- test: /\.(js|mjs|jsx|ts|tsx)$/,
- include: paths.appSrc,
- 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,+titleProp,+ref![path]',
- },
- },
- },
- ],
- ],
-
-
-
- cacheDirectory: true,
-
- cacheCompression: false,
- compact: isEnvProduction,
- },
- },
-
-
- {
- 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: false,
-
-
-
-
- sourceMaps: shouldUseSourceMap,
- inputSourceMap: shouldUseSourceMap,
- },
- },
-
-
-
-
-
-
-
- {
- test: cssRegex,
- exclude: cssModuleRegex,
- use: getStyleLoaders({
- importLoaders: 1,
- sourceMap: isEnvProduction && shouldUseSourceMap,
- }),
-
-
-
-
- sideEffects: true,
- },
-
-
- {
- test: cssModuleRegex,
- use: getStyleLoaders({
- importLoaders: 1,
- sourceMap: isEnvProduction && shouldUseSourceMap,
- modules: {
- getLocalIdent: getCSSModuleLocalIdent,
- },
- }),
- },
-
-
-
- {
- test: sassRegex,
- exclude: sassModuleRegex,
- use: getStyleLoaders(
- {
- importLoaders: 2,
- sourceMap: isEnvProduction && shouldUseSourceMap,
- },
- 'sass-loader'
- ),
-
-
-
-
- sideEffects: true,
- },
-
-
- {
- test: sassModuleRegex,
- use: getStyleLoaders(
- {
- importLoaders: 2,
- sourceMap: isEnvProduction && shouldUseSourceMap,
- modules: {
- getLocalIdent: getCSSModuleLocalIdent,
- },
- },
- 'sass-loader'
- ),
- },
-
-
-
-
-
- {
- loader: require.resolve('file-loader'),
-
-
-
-
- exclude: [/\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
- options: {
- name: 'static/media/[name].[hash:8].[ext]',
- },
- },
-
-
- ],
- },
- ],
- },
- plugins: [
-
- 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
- )
- ),
-
-
-
- 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 ManifestPlugin({
- fileName: 'asset-manifest.json',
- publicPath: publicPath,
- generate: (seed, files, entrypoints) => {
- const manifestFiles = files.reduce((manifest, file) => {
- manifest[file.name] = file.path;
- return manifest;
- }, seed);
- const entrypointFiles = entrypoints.main.filter(
- fileName => !fileName.endsWith('.map')
- );
-
- return {
- files: manifestFiles,
- entrypoints: entrypointFiles,
- };
- },
- }),
-
-
-
-
-
- new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-
-
- isEnvProduction &&
- new WorkboxWebpackPlugin.GenerateSW({
- clientsClaim: true,
- exclude: [/\.map$/, /asset-manifest\.json$/],
- importWorkboxFrom: 'cdn',
- navigateFallback: publicUrl + '/index.html',
- navigateFallbackBlacklist: [
-
- new RegExp('^/_'),
-
-
-
-
- new RegExp('/[^/?]+\\.[^/]+$'),
- ],
- }),
-
- useTypeScript &&
- new ForkTsCheckerWebpackPlugin({
- typescript: resolve.sync('typescript', {
- basedir: paths.appNodeModules,
- }),
- async: isEnvDevelopment,
- useTypescriptIncrementalApi: true,
- checkSyntacticErrors: true,
- resolveModuleNameModule: process.versions.pnp
- ? `${__dirname}/pnpTs.js`
- : undefined,
- resolveTypeReferenceDirectiveModule: process.versions.pnp
- ? `${__dirname}/pnpTs.js`
- : undefined,
- tsconfig: paths.appTsConfig,
- reportFiles: [
- '**',
- '!**/__tests__/**',
- '!**/?(*.)(spec|test).*',
- '!**/src/setupProxy.*',
- '!**/src/setupTests.*',
- ],
- silent: true,
-
- formatter: isEnvProduction ? typescriptFormatter : undefined,
- }),
- ].filter(Boolean),
-
-
- node: {
- module: 'empty',
- dgram: 'empty',
- dns: 'mock',
- fs: 'empty',
- http2: 'empty',
- net: 'empty',
- tls: 'empty',
- child_process: 'empty',
- },
-
-
- performance: false,
- };
- };
|