Created
April 22, 2020 19:17
-
-
Save hindmost/5d2c04ee31aaca9f64dec6a676ba1c67 to your computer and use it in GitHub Desktop.
cra-browserext-boilerplate: config-overrides.js - result
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
const paths = require('react-scripts/config/paths'); | |
const HtmlWebpackPlugin = require('html-webpack-plugin'); | |
const ManifestPlugin = require('webpack-manifest-plugin'); | |
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); | |
// Export function to override the CRA webpack config | |
module.exports = function override(config, env) { | |
// Replace single entry point in the config with multiple ones | |
// Note: you may remove any property below except "popup" to exclude respective entry point from compilation | |
config.entry = { | |
popup: paths.appIndexJs, | |
options: paths.appSrc + '/options.js', | |
background: paths.appSrc + '/background.js', | |
content: paths.appSrc + '/content.js' | |
}; | |
// Change output filename template to get rid of hash there | |
config.output.filename = 'static/js/[name].js'; | |
// Disable built-in SplitChunksPlugin | |
config.optimization.splitChunks = { | |
cacheGroups: {default: false} | |
}; | |
// Disable runtime chunk addition for each entry point | |
config.optimization.runtimeChunk = false; | |
// Shared minify options to be used in HtmlWebpackPlugin constructor | |
const minifyOpts = { | |
removeComments: true, | |
collapseWhitespace: true, | |
removeRedundantAttributes: true, | |
useShortDoctype: true, | |
removeEmptyAttributes: true, | |
removeStyleLinkTypeAttributes: true, | |
keepClosingSlash: true, | |
minifyJS: true, | |
minifyCSS: true, | |
minifyURLs: true, | |
}; | |
// Custom HtmlWebpackPlugin instance for index (popup) page | |
const indexHtmlPlugin = new HtmlWebpackPlugin({ | |
inject: true, | |
template: paths.appHtml, | |
filename: 'popup.html', | |
chunks: ['popup'], | |
minify: minifyOpts, | |
}); | |
// Replace origin HtmlWebpackPlugin instance in config.plugins with the above one | |
config.plugins = replacePlugin(config.plugins, | |
(name) => /HtmlWebpackPlugin/i.test(name), indexHtmlPlugin | |
); | |
// Extra HtmlWebpackPlugin instance for options page | |
const optionsHtmlPlugin = new HtmlWebpackPlugin({ | |
inject: true, | |
template: paths.appPublic + '/options.html', | |
filename: 'options.html', | |
chunks: ['options'], | |
minify: minifyOpts, | |
}); | |
// Add the above HtmlWebpackPlugin instance into config.plugins | |
// Note: you may remove/comment the next line if you don't need an options page | |
config.plugins.push(optionsHtmlPlugin); | |
// Custom ManifestPlugin instance to cast asset-manifest.json back to old plain format | |
const manifestPlugin = new ManifestPlugin({ | |
fileName: 'asset-manifest.json', | |
}); | |
// Replace origin ManifestPlugin instance in config.plugins with the above one | |
config.plugins = replacePlugin(config.plugins, | |
(name) => /ManifestPlugin/i.test(name), manifestPlugin | |
); | |
// Custom MiniCssExtractPlugin instance to get rid of hash in filename template | |
const miniCssExtractPlugin = new MiniCssExtractPlugin({ | |
filename: 'static/css/[name].css' | |
}); | |
// Replace origin MiniCssExtractPlugin instance in config.plugins with the above one | |
config.plugins = replacePlugin(config.plugins, | |
(name) => /MiniCssExtractPlugin/i.test(name), miniCssExtractPlugin | |
); | |
// Remove GenerateSW plugin from config.plugins to disable service worker generation | |
config.plugins = replacePlugin(config.plugins, | |
(name) => /GenerateSW/i.test(name) | |
); | |
return config; | |
}; | |
// Utility function to replace/remove specific plugin in a webpack config | |
function replacePlugin(plugins, nameMatcher, newPlugin) { | |
const i = plugins.findIndex((plugin) => { | |
return plugin.constructor && plugin.constructor.name && | |
nameMatcher(plugin.constructor.name); | |
}); | |
return i > -1? | |
plugins.slice(0, i).concat(newPlugin || []).concat(plugins.slice(i+1)) : | |
plugins; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment