-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
CDM-RS: CRA custom output name based on package name and version when…
… building Steps: - yarn add react-app-rewired -D - yarn add @babel/runtime - add config-overrides.js Refs: https://github.com/timarney/react-app-rewired https://webpack.js.org/configuration/entry-context/#naming Multiple entries rewire error: Cannot read property 'filter' of undefined timarney/react-app-rewired#421 https://github.com/vl4d1m1r4/cra-multi-entry/blob/8c62e9168e638e4c841fff87291cec6a99eb4ea9/config-overrides.js Disabling code splitting in CRA2 facebook/create-react-app#5306 Setting up a template with React-App-Rewired https://dev.to/aryclenio/part-3-setting-up-a-template-with-react-app-rewired-3e9j Custom output name based on package name and version when building timarney/react-app-rewired#301 How do I build js and css without random number? facebook/create-react-app#1005 A way to defined the bundle filename? facebook/create-react-app#4156 https://medium.com/@ryoldash/customize-webpack-config-of-react-app-created-with-create-react-app-7a78c7849edc https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
- Loading branch information
1 parent
de0046b
commit 9e525a6
Showing
3 changed files
with
112 additions
and
5 deletions.
There are no files selected for viewing
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| const ManifestPlugin = require('webpack-manifest-plugin'); | ||
| const paths = require('react-scripts/config/paths'); | ||
| const version = require('./package.json').version; | ||
| const moduleName = 'cdm-rcs'; | ||
| const buildFileName = `${moduleName}-${version}`; | ||
|
|
||
| /** | ||
| * Utility function to replace plugins in the webpack config files used by react-scripts | ||
| */ | ||
| const replacePlugin = (plugins, nameMatcher, newPlugin) => { | ||
| const pluginIndex = plugins.findIndex((plugin) => { | ||
| return ( | ||
| plugin.constructor && | ||
| plugin.constructor.name && | ||
| nameMatcher(plugin.constructor.name) | ||
| ); | ||
| }); | ||
|
|
||
| if (pluginIndex === -1) return plugins; | ||
|
|
||
| return plugins | ||
| .slice(0, pluginIndex) | ||
| .concat(newPlugin) | ||
| .concat(plugins.slice(pluginIndex + 1)); | ||
| }; | ||
|
|
||
| module.exports = { | ||
| webpack: function (config, env) { | ||
| const isEnvProduction = env === 'production'; | ||
| if (isEnvProduction) { | ||
| // Entry Naming: buildFileName instead of main by CRA default build file name | ||
| // https://webpack.js.org/configuration/entry-context/#naming | ||
| config.entry = { [buildFileName]: './src/index.js' }; | ||
|
|
||
| // Disable optimization runtimeChunk | ||
| config.optimization.runtimeChunk = false; | ||
| // Disable optimization splitChunks | ||
| config.optimization.splitChunks = { | ||
| cacheGroups: { | ||
| default: false, | ||
| }, | ||
| }; | ||
|
|
||
| // Multiple entries rewire error: Cannot read property 'filter' of undefined | ||
| // https://github.com/timarney/react-app-rewired/issues/421 | ||
| const multiEntryManfiestPlugin = new ManifestPlugin({ | ||
| fileName: 'asset-manifest.json', | ||
| publicPath: paths.publicUrlOrPath, | ||
| generate: (seed, files, entrypoints) => { | ||
| const manifestFiles = files.reduce((manifest, file) => { | ||
| manifest[file.name] = file.path; | ||
| return manifest; | ||
| }, seed); | ||
| const entrypointFiles = {}; | ||
| Object.keys(entrypoints).forEach((entrypoint) => { | ||
| entrypointFiles[entrypoint] = entrypoints[ | ||
| entrypoint | ||
| ].filter((fileName) => !fileName.endsWith('.map')); | ||
| }); | ||
|
|
||
| return { | ||
| files: manifestFiles, | ||
| entrypoints: entrypointFiles, | ||
| }; | ||
| }, | ||
| }); | ||
|
|
||
| // replace CRA ManifestPlugin with multiEntryManfiestPlugin | ||
| config.plugins = replacePlugin( | ||
| config.plugins, | ||
| (name) => /ManifestPlugin/i.test(name), | ||
| multiEntryManfiestPlugin | ||
| ); | ||
|
|
||
| // Override JS output filename and chunkFilename | ||
| config.output.filename = `static/js/[name].js`; | ||
| config.output.chunkFilename = `static/js/[name].chunk.js`; | ||
|
|
||
| // Override CSS output filename and chunkFilename | ||
| // eslint-disable-next-line array-callback-return | ||
| config.plugins.map((plugin, i) => { | ||
| if ( | ||
| plugin.options && | ||
| plugin.options.filename && | ||
| plugin.options.filename.includes('static/css') | ||
| ) { | ||
| config.plugins[i].options = { | ||
| ...config.plugins[i].options, | ||
| filename: `static/css/[name].css`, | ||
| chunkFilename: `static/css/[name].chunk.css`, | ||
| }; | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| return config; | ||
| }, | ||
| }; |
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
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