eject後のwebpack.config.jsを１から読み解いてみる①

usestrict

constfs=require('fs');constpath=require('path');constwebpack=require('webpack');constresolve=require('resolve');constPnpWebpackPlugin=require('pnp-webpack-plugin');constHtmlWebpackPlugin=require('html-webpack-plugin');constCaseSensitivePathsPlugin=require('case-sensitive-paths-webpack-plugin');constInlineChunkHtmlPlugin=require('react-dev-utils/InlineChunkHtmlPlugin');constTerserPlugin=require('terser-webpack-plugin');constMiniCssExtractPlugin=require('mini-css-extract-plugin');constOptimizeCSSAssetsPlugin=require('optimize-css-assets-webpack-plugin');constsafePostCssParser=require('postcss-safe-parser');constManifestPlugin=require('webpack-manifest-plugin');constInterpolateHtmlPlugin=require('react-dev-utils/InterpolateHtmlPlugin');constWorkboxWebpackPlugin=require('workbox-webpack-plugin');constWatchMissingNodeModulesPlugin=require('react-dev-utils/WatchMissingNodeModulesPlugin');constModuleScopePlugin=require('react-dev-utils/ModuleScopePlugin');constgetCSSModuleLocalIdent=require('react-dev-utils/getCSSModuleLocalIdent');constpaths=require('./paths');constmodules=require('./modules');constgetClientEnvironment=require('./env');constModuleNotFoundPlugin=require('react-dev-utils/ModuleNotFoundPlugin');constForkTsCheckerWebpackPlugin=require('react-dev-utils/ForkTsCheckerWebpackPlugin');consttypescriptFormatter=require('react-dev-utils/typescriptFormatter');constpostcssNormalize=require('postcss-normalize');constappPackageJson=require(paths.appPackageJson);

// Source maps are resource heavy and can cause out of memory issue for large source files.constshouldUseSourceMap=process.env.GENERATE_SOURCEMAP!=='false';

// Some apps do not need the benefits of saving a web request, so not inlining the chunk// makes for a smoother build process.constshouldInlineRuntimeChunk=process.env.INLINE_RUNTIME_CHUNK!=='false';

constisExtendingEslintConfig=process.env.EXTEND_ESLINT==='true';

constimageInlineSizeLimit=parseInt(process.env.IMAGE_INLINE_SIZE_LIMIT||'10000');

// Check if TypeScript is setupconstuseTypeScript=fs.existsSync(paths.appTsConfig);

// style files regexesconstcssRegex=/\.css$/;constcssModuleRegex=/\.module\.css$/;constsassRegex=/\.(scss|sass)$/;constsassModuleRegex=/\.module\.(scss|sass)$/;

module.exports=function(webpackEnv){constisEnvDevelopment=webpackEnv==='development';constisEnvProduction=webpackEnv==='production';

// Variable used for enabling profiling in Production// passed into alias object. Uses a flag if passed into the build commandconstisEnvProductionProfile=isEnvProduction&&process.argv.includes('--profile');

// We will provide `paths.publicUrlOrPath` to our app// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.// Get environment variables to inject into our app.constenv=getClientEnvironment(paths.publicUrlOrPath.slice(0,-1));

// common function to get style loadersconstgetStyleLoaders=(cssOptions,preProcessor)=>{constloaders=[isEnvDevelopment&&require.resolve('style-loader'),isEnvProduction&&{loader:MiniCssExtractPlugin.loader,// css is located in `static/css`, use '../../' to locate index.html folder// in production `paths.publicUrlOrPath` can be a relative pathoptions:paths.publicUrlOrPath.startsWith('.')?{publicPath:'../../'}:{},},{loader:require.resolve('css-loader'),options:cssOptions,},{// Options for PostCSS as we reference these options twice// Adds vendor prefixing based on your specified browser support in// package.jsonloader:require.resolve('postcss-loader'),options:{// Necessary for external CSS imports to work// https://github.com/facebook/create-react-app/issues/2677ident:'postcss',plugins:()=>[require('postcss-flexbugs-fixes'),require('postcss-preset-env')({autoprefixer:{flexbox:'no-2009',},stage:3,}),// Adds PostCSS Normalize as the reset css with default options,// so that it honors browserslist config in package.json// which in turn let's users customize the target behavior as per their needs.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,},});}returnloaders;};

return{

mode:isEnvProduction?'production':isEnvDevelopment&&'development',

// Stop compilation early in productionbail:isEnvProduction,

devtool:isEnvProduction?shouldUseSourceMap?'source-map':false:isEnvDevelopment&&'cheap-module-source-map',

entry:[// Include an alternative client for WebpackDevServer. A client's job is to// connect to WebpackDevServer by a socket and get notified about changes.// When you save a file, the client will either apply hot updates (in case// of CSS changes), or refresh the page (in case of JS changes). When you// make a syntax error, this client will display a syntax error overlay.// Note: instead of the default WebpackDevServer client, we use a custom one// to bring better experience for Create React App users. You can replace// the line below with these two lines if you prefer the stock client:// require.resolve('webpack-dev-server/client') + '?/',// require.resolve('webpack/hot/dev-server'),isEnvDevelopment&&require.resolve('react-dev-utils/webpackHotDevClient'),// Finally, this is your app's code:paths.appIndexJs,// We include the app code last so that if there is a runtime error during// initialization, it doesn't blow up the WebpackDevServer client, and// changing JS code would still trigger a refresh.].filter(Boolean),

output:{// The build folder.path:isEnvProduction?paths.appBuild:undefined,// Add /* filename */ comments to generated require()s in the output.pathinfo:isEnvDevelopment,// There will be one main bundle, and one file per asynchronous chunk.// In development, it does not produce real files.filename:isEnvProduction?'static/js/[name].[contenthash:8].js':isEnvDevelopment&&'static/js/bundle.js',// TODO: remove this when upgrading to webpack 5futureEmitAssets:true,// There are also additional JS chunk files if you use code splitting.chunkFilename:isEnvProduction?'static/js/[name].[contenthash:8].chunk.js':isEnvDevelopment&&'static/js/[name].chunk.js',// webpack uses `publicPath` to determine where the app is being served from.// It requires a trailing slash, or the file assets will get an incorrect path.// We inferred the "public path" (such as / or /my-project) from homepage.publicPath:paths.publicUrlOrPath,// Point sourcemap entries to original disk location (format as URL on Windows)devtoolModuleFilenameTemplate:isEnvProduction?info=>path.relative(paths.appSrc,info.absoluteResourcePath).replace(/\\/g,'/'):isEnvDevelopment&&(info=>path.resolve(info.absoluteResourcePath).replace(/\\/g,'/')),// Prevents conflicts when multiple webpack runtimes (from different apps)// are used on the same page.jsonpFunction:`webpackJsonp${appPackageJson.name}`,// this defaults to 'window', but by setting it to 'this' then// module chunks which are built will work in web workers as well.globalObject:'this',},

optimization:{

minimize:isEnvProduction,

minimizer:[

// This is only used in production modenewTerserPlugin({terserOptions:{parse:{// We want terser to parse ecma 8 code. However, we don't want it// to apply any minification steps that turns valid ecma 5 code// into invalid ecma 5 code. This is why the 'compress' and 'output'// sections only apply transformations that are ecma 5 safe// https://github.com/facebook/create-react-app/pull/4234ecma:8,},compress:{ecma:5,warnings:false,// Disabled because of an issue with Uglify breaking seemingly valid code:// https://github.com/facebook/create-react-app/issues/2376// Pending further investigation:// https://github.com/mishoo/UglifyJS2/issues/2011comparisons:false,// Disabled because of an issue with Terser breaking valid code:// https://github.com/facebook/create-react-app/issues/5250// Pending further investigation:// https://github.com/terser-js/terser/issues/120inline:2,},mangle:{safari10:true,},// Added for profiling in devtoolskeep_classnames:isEnvProductionProfile,keep_fnames:isEnvProductionProfile,output:{ecma:5,comments:false,// Turned on because emoji and regex is not minified properly using default// https://github.com/facebook/create-react-app/issues/2488ascii_only:true,},},sourceMap:shouldUseSourceMap,}),

// This is only used in production modenewOptimizeCSSAssetsPlugin({cssProcessorOptions:{parser:safePostCssParser,map:shouldUseSourceMap?{// `inline: false` forces the sourcemap to be output into a// separate fileinline:false,// `annotation: true` appends the sourceMappingURL to the end of// the css file, helping the browser find the sourcemapannotation:true,}:false,},cssProcessorPluginOptions:{preset:['default',{minifyFontValues:{removeQuotes:false}}],},}),

// Automatically split vendor and commons// https://twitter.com/wSokra/status/969633336732905474// https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366splitChunks:{chunks:'all',name:false,},

// Keep the runtime chunk separated to enable long term caching// https://twitter.com/wSokra/status/969679223278505985// https://github.com/facebook/create-react-app/issues/5358runtimeChunk:{name:entrypoint=>`runtime-${entrypoint.name}`,},