Created
February 24, 2021 21:56
-
-
Save cphoover/708cf60ed5c23764371990938089a9c8 to your computer and use it in GitHub Desktop.
Configuration for non-working webpack bundle
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
/* eslint-disable */ | |
const fs = require('fs'); | |
const nodeExternals = require('webpack-node-externals'); | |
const path = require('path'); | |
const webpack = require('webpack'); | |
const resolve = require('resolve'); | |
const ManifestPlugin = require('webpack-manifest-plugin'); | |
const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin'); | |
const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin'); | |
const styledJSXRule = require('../styled-jsx-rule'); | |
const paths = require('./static-paths'); | |
const modules = require('./modules'); | |
const getClientEnvironment = require('./env'); | |
const { plugins: babelPlugins } = require('../.babelrc'); | |
// Source maps are resource heavy and can cause out of memory issue for large source files. | |
const shouldUseSourceMap = 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. | |
const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false'; | |
// Check if TypeScript is setup | |
const useTypeScript = fs.existsSync(paths.appTsConfig); | |
// This is the production and development configuration. | |
// It is focused on developer experience, fast rebuilds, and a minimal bundle. | |
module.exports = function(webpackEnv) { | |
const isEnvDevelopment = webpackEnv === 'development'; | |
const isEnvProduction = webpackEnv === 'production'; | |
// 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. | |
// In development, we always serve from the root. This makes config easier. | |
const publicPath = isEnvProduction | |
? paths.servedPath | |
: isEnvDevelopment && '/'; | |
// Some apps do not use client-side routing with pushState. | |
// For these, "homepage" can be set to "." to enable relative asset paths. | |
const shouldUseRelativeAssetPaths = publicPath === './'; | |
// `publicUrl` is just like `publicPath`, but we will provide it 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. | |
const publicUrl = isEnvProduction | |
? publicPath.slice(0, -1) | |
: isEnvDevelopment && ''; | |
// Get environment variables to inject into our app. | |
const env = getClientEnvironment(publicUrl); | |
return { | |
mode: 'production', | |
entry: paths.appIndexJs, | |
externals: [nodeExternals()], | |
output: { | |
// libraryTarget: 'commonjs', | |
globalObject: 'this', | |
// The build folder. | |
path: paths.appBuild, | |
// Add /* filename */ comments to generated require()s in the output. | |
// In development, it does not produce real files. | |
filename: 'main.js', | |
// TODO: remove this when upgrading to webpack 5 | |
futureEmitAssets: true, | |
// There are also additional JS chunk files if you use code splitting. | |
//~cph chunkFilename: 'static/js/[name].chunk.js', | |
// We inferred the "public path" (such as / or /my-project) from homepage. | |
// We use "/" in development. | |
publicPath: publicPath | |
// Point sourcemap entries to original disk location (format as URL on Windows) | |
}, | |
optimization: { | |
// 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-be739a861366 | |
splitChunks: { | |
chunks: 'all', | |
name: false | |
} | |
}, | |
plugins: [ | |
new webpack.optimize.LimitChunkCountPlugin({ | |
maxChunks: 1 | |
}) | |
], | |
resolve: { | |
// This allows you to set a fallback for where Webpack should look for modules. | |
// We placed these paths second because we want `node_modules` to "win" | |
// if there are any conflicts. This matches Node resolution mechanism. | |
// https://github.com/facebook/create-react-app/issues/253 | |
modules: ['node_modules', paths.appNodeModules].concat( | |
modules.additionalModulePaths || [] | |
), | |
// These are the reasonable defaults supported by the Node ecosystem. | |
// We also include JSX as a common component filename extension to support | |
// some tools, although we do not recommend using it, see: | |
// https://github.com/facebook/create-react-app/issues/290 | |
// `web` extension prefixes have been added for better support | |
// for React Native Web. | |
extensions: paths.moduleFileExtensions | |
.map((ext) => `.${ext}`) | |
.filter((ext) => useTypeScript || !ext.includes('ts')), | |
alias: { | |
// Support React Native Web | |
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/ | |
'react-native': 'react-native-web' | |
}, | |
plugins: [ | |
// Prevents users from importing files from outside of src/ (or node_modules/). | |
// This often causes confusion because we only process files within src/ with babel. | |
// To fix this, we prevent you from importing files out of src/ -- if you'd like to, | |
// please link the files into your node_modules/ and let module-resolution kick in. | |
// Make sure your source files are compiled, as they will not be processed in any way. | |
new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]) | |
] | |
}, | |
resolveLoader: {}, | |
module: { | |
strictExportPresence: true, | |
rules: [ | |
{ | |
test: /\.(graphql|gql)$/, | |
exclude: /node_modules/, | |
loader: 'graphql-tag/loader' | |
}, | |
/* | |
// support sourcemaps from 3p modules | |
// https://webpack.js.org/loaders/source-map-loader/ | |
{ | |
test: /\.js$/, | |
use: ['source-map-loader'], | |
enforce: 'pre' | |
},*/ | |
// Disable require.ensure as it's not a standard language feature. | |
{ parser: { requireEnsure: false } }, | |
{ | |
// "oneOf" will traverse all following loaders until one will | |
// match the requirements. When no loader matches it will fall | |
// back to the "file" loader at the end of the loader list. | |
oneOf: [ | |
{ | |
test: /\.svg$/, | |
loader: 'svg-url-loader', | |
options: { | |
// make loader to behave like url-loader, for all svg files | |
encoding: 'base64' | |
} | |
}, | |
// "url" loader works like "file" loader except that it embeds assets | |
// smaller than specified limit in bytes as data URLs to avoid requests. | |
// A missing `test` is equivalent to a match. | |
{ | |
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/], | |
loader: require.resolve('url-loader'), | |
options: { | |
limit: 10000, | |
name: 'static/media/[name].[hash:8].[ext]' | |
} | |
}, | |
// Process application JS with Babel. | |
// The preset includes JSX, Flow, TypeScript, and some ESnext features. | |
{ | |
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,+ref![path]' | |
// } | |
} | |
} | |
], | |
...babelPlugins.filter( | |
(f) => !/remove-jsx-attr/.test(f) | |
) | |
], | |
// This is a feature of `babel-loader` for webpack (not Babel itself). | |
// It enables caching results in ./node_modules/.cache/babel-loader/ | |
// directory for faster rebuilds. | |
cacheDirectory: true, | |
cacheCompression: isEnvProduction, | |
compact: isEnvProduction | |
} | |
}, | |
// Process any JS outside of the app with Babel. | |
// Unlike the application JS, we only compile the standard ES features. | |
{ | |
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, | |
// If an error happens in a package, it's possible to be | |
// because it was compiled. Thus, we don't want the browser | |
// debugger to show the original code. Instead, the code | |
// being evaluated would be much more helpful. | |
sourceMaps: true | |
} | |
}, | |
// load in styled jsx | |
styledJSXRule, | |
// "file" loader makes sure those assets get served by WebpackDevServer. | |
// When you `import` an asset, you get its (virtual) filename. | |
// In production, they would get copied to the `build` folder. | |
// This loader doesn't use a "test" so it will catch all modules | |
// that fall through the other loaders. | |
{ | |
loader: require.resolve('file-loader'), | |
// Exclude `js` files to keep "css" loader working as it injects | |
// its runtime that would otherwise be processed through "file" loader. | |
// Also exclude `html` and `json` extensions so they get processed | |
// by webpacks internal loaders. | |
exclude: [ | |
/\.(js|mjs|jsx|ts|tsx)$/, | |
/\.html$/, | |
/\.json$/ | |
], | |
options: { | |
name: 'static/media/[name].[hash:8].[ext]' | |
} | |
} | |
// ** STOP ** Are you adding a new loader? | |
// Make sure to add the new loader(s) before the "file" loader. | |
] | |
} | |
] | |
}, | |
plugins: [ | |
// This gives some necessary context to module not found errors, such as | |
// the requesting resource. | |
new ModuleNotFoundPlugin(paths.appPath), | |
// Makes some environment variables available to the JS code, for example: | |
// if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`. | |
// It is absolutely essential that NODE_ENV is set to production | |
// during a production build. | |
// Otherwise React will be compiled in the very slow development mode. | |
new webpack.DefinePlugin(env.stringified), | |
// Watcher doesn't work well if you mistype casing in a path so we use | |
// If you require a missing module and then `npm install` it, you still have | |
// to restart the development server for Webpack to discover it. This plugin | |
// makes the discovery automatic so you don't have to restart. | |
// See https://github.com/facebook/create-react-app/issues/186 | |
// Generate a manifest file which contains a mapping of all asset filenames | |
// to their corresponding output file so that tools can pick it up without | |
// having to parse `index.html`. | |
new ManifestPlugin({ | |
fileName: 'asset-manifest.json', | |
publicPath: publicPath, | |
generate: (seed, files) => { | |
const manifestFiles = files.reduce(function( | |
manifest, | |
file | |
) { | |
manifest[file.name] = file.path; | |
return manifest; | |
}, | |
seed); | |
return { | |
files: manifestFiles | |
}; | |
} | |
}) | |
// TypeScript type checking | |
].filter(Boolean) | |
// Some libraries import Node modules but don't use them in the browser. | |
// Tell Webpack to provide empty mocks for them so importing them works. | |
}; | |
}; | |
/* eslint-enable */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment