Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

use MiniCssExtractPlugin with hmr in dev mode #8148

Closed
wants to merge 2 commits into from
Closed

use MiniCssExtractPlugin with hmr in dev mode #8148

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6779795
use MiniCssExtractPlugin with hmr in dev mode
vatz88 Dec 11, 2019
3154770
Merge branch 'master' into MiniCssExtractPlugin-hmr
vatz88 Feb 11, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 18 additions & 16 deletions packages/react-scripts/config/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,10 +92,12 @@ module.exports = function(webpackEnv) {
// common function to get style loaders
const getStyleLoaders = (cssOptions, preProcessor) => {
const loaders = [
isEnvDevelopment && require.resolve('style-loader'),
isEnvProduction && {
{
loader: MiniCssExtractPlugin.loader,
options: shouldUseRelativeAssetPaths ? { publicPath: '../../' } : {},
options: {
hmr: isEnvDevelopment,
publicPath: shouldUseRelativeAssetPaths ? '../../' : undefined,
},
},
{
loader: require.resolve('css-loader'),
Expand Down Expand Up @@ -270,8 +272,8 @@ module.exports = function(webpackEnv) {
: false,
},
cssProcessorPluginOptions: {
preset: ['default', { minifyFontValues: { removeQuotes: false } }]
}
preset: ['default', { minifyFontValues: { removeQuotes: false } }],
},
}),
],
// Automatically split vendor and commons
Expand Down Expand Up @@ -493,10 +495,7 @@ module.exports = function(webpackEnv) {
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use MiniCSSExtractPlugin to extract that CSS
// to a file, but in development "style" loader enables hot editing
// of CSS.
// We use MiniCSSExtractPlugin to extract CSS to a file.
// By default we support CSS Modules with the extension .module.css
{
test: cssRegex,
Expand Down Expand Up @@ -640,13 +639,16 @@ module.exports = function(webpackEnv) {
// See https://github.com/facebook/create-react-app/issues/186
isEnvDevelopment &&
new WatchMissingNodeModulesPlugin(paths.appNodeModules),
isEnvProduction &&
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: 'static/css/[name].[contenthash:8].css',
chunkFilename: 'static/css/[name].[contenthash:8].chunk.css',
}),
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: isEnvProduction
? 'static/css/[name].[contenthash:8].css'
: isEnvDevelopment && 'static/css/[name].css',
chunkFilename: isEnvProduction
? 'static/css/[name].[contenthash:8].chunk.css'
: isEnvDevelopment && 'static/css/[name].chunk.css',
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is isEnvDevelopment && necessary?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not really, just following the pattern how it's written elsewhere in the code. For example https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js#L194

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the reference - I hadn't noticed that. Consistency is indeed important, but I can't help but wonder about the purpose of these checks 🤔

}),
// Generate an asset manifest file with the following content:
// - "files" key: Mapping of all asset filenames to their corresponding
// output file so that tools can pick it up without having to parse
Expand Down
1 change: 0 additions & 1 deletion packages/react-scripts/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,6 @@
"resolve-url-loader": "3.1.1",
"sass-loader": "8.0.0",
"semver": "6.3.0",
"style-loader": "1.0.1",
"terser-webpack-plugin": "2.2.2",
"ts-pnp": "1.1.5",
"url-loader": "2.3.0",
Expand Down