Skip to content
GitLab
Commit a08eb3b4 authored by Andreas Hoffmann's avatar Andreas Hoffmann Committed by Dan Abramov
Browse files

Use Rule.oneOf to resolve correct loader (#2747) 

* Use oneOf to resolve correct loader

* Add html and json fallthrough again

* Use oneOf to resolve correct loader in dev

* Document file-loaders `js` exclusion

* Remove `jsx` from exclusion in prod config
parent bbbc15dc
3 merge requests!12191Lim.Pisey.168:/Identified - We are currently investigating reports of missing build logs. The issue has been identified and a resolution is in progress. We will provide a further update when available.Mar 21, 09:02 UTC,!12853brikk,!5717Automatically extract project file structure from build bundle file
Hide whitespace changes
Inline Side-by-side
Showing
with 171 additions and 175 deletions
+171 -175
packages/react-scripts/config/webpack.config.dev.js
+ 76
- 78
View file @ a08eb3b4
...@@ -150,97 +150,95 @@ module.exports = { ...@@ -150,97 +150,95 @@ module.exports = {
], ],
include: paths.appSrc, include: paths.appSrc,
}, },
// ** ADDING/UPDATING LOADERS **
// The "file" loader handles all assets unless explicitly excluded.
// The `exclude` list *must* be updated with every change to loader extensions.
// When adding a new loader, you must add its `test`
// as a new entry in the `exclude` list for "file" loader.
// "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.
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
// "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 JS with Babel.
{ {
test: /\.(js|jsx)$/, // "oneOf" will traverse all following loaders until one will
include: paths.appSrc, // match the requirements. When no loader matches it will fall
loader: require.resolve('babel-loader'), // back to the "file" loader at the end of the loader list.
options: { oneOf: [
// @remove-on-eject-begin // "url" loader works like "file" loader except that it embeds assets
babelrc: false, // smaller than specified limit in bytes as data URLs to avoid requests.
presets: [require.resolve('babel-preset-react-app')], // A missing `test` is equivalent to a match.
// @remove-on-eject-end
// 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,
},
},
// "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 a plugin to extract that CSS to a file, but
// in development "style" loader enables hot editing of CSS.
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{ {
loader: require.resolve('css-loader'), test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: { options: {
importLoaders: 1, limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
}, },
}, },
// Process JS with Babel.
{ {
loader: require.resolve('postcss-loader'), test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: { options: {
// Necessary for external CSS imports to work // @remove-on-eject-begin
// https://github.com/facebookincubator/create-react-app/issues/2677 babelrc: false,
ident: 'postcss', presets: [require.resolve('babel-preset-react-app')],
plugins: () => [ // @remove-on-eject-end
require('postcss-flexbugs-fixes'), // This is a feature of `babel-loader` for webpack (not Babel itself).
autoprefixer({ // It enables caching results in ./node_modules/.cache/babel-loader/
browsers: [ // directory for faster rebuilds.
'>1%', cacheDirectory: true,
'last 4 versions', },
'Firefox ESR', },
'not ie < 9', // React doesn't support IE8 anyway // "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 a plugin to extract that CSS to a file, but
// in development "style" loader enables hot editing of CSS.
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
], ],
flexbox: 'no-2009', },
}), },
], ],
},
// "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 don't uses a "test" so it will catch all modules
// that fall through the other loaders.
{
// Exclude `js` files to keep "css" loader working as it injects
// it's runtime that would otherwise processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.js$/, /\.html$/, /\.json$/],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
}, },
}, },
], ],
}, },
// ** STOP ** Are you adding a new loader? // ** STOP ** Are you adding a new loader?
// Remember to add the new extension(s) to the "file" loader exclusion list. // Make sure to add the new loader(s) before the "file" loader.
], ],
}, },
plugins: [ plugins: [
......
packages/react-scripts/config/webpack.config.prod.js
+ 95
- 97
View file @ a08eb3b4
...@@ -152,109 +152,107 @@ module.exports = { ...@@ -152,109 +152,107 @@ module.exports = {
], ],
include: paths.appSrc, include: paths.appSrc,
}, },
// ** ADDING/UPDATING LOADERS **
// The "file" loader handles all assets unless explicitly excluded.
// The `exclude` list *must* be updated with every change to loader extensions.
// When adding a new loader, you must add its `test`
// as a new entry in the `exclude` list in the "file" loader.
// "file" loader makes sure those assets end up in the `build` folder.
// When you `import` an asset, you get its filename.
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.bmp$/,
/\.gif$/,
/\.jpe?g$/,
/\.png$/,
],
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
// "url" loader works just like "file" loader but it also embeds
// assets smaller than specified size as data URLs to avoid requests.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
},
},
// Process JS with Babel.
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
// @remove-on-eject-begin
babelrc: false,
presets: [require.resolve('babel-preset-react-app')],
// @remove-on-eject-end
compact: true,
},
},
// The notation here is somewhat confusing.
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader normally turns CSS into JS modules injecting <style>,
// but unlike in development configuration, we do something different.
// `ExtractTextPlugin` first applies the "postcss" and "css" loaders
// (second argument), then grabs the result CSS and puts it into a
// separate file in our build process. This way we actually ship
// a single CSS file in production instead of JS code injecting <style>
// tags. If you use code splitting, however, any async bundles will still
// use the "style" loader inside the async code so CSS from them won't be
// in the main CSS file.
{ {
test: /\.css$/, // "oneOf" will traverse all following loaders until one will
loader: ExtractTextPlugin.extract( // match the requirements. When no loader matches it will fall
Object.assign( // back to the "file" loader at the end of the loader list.
{ oneOf: [
fallback: require.resolve('style-loader'), // "url" loader works just like "file" loader but it also embeds
use: [ // assets smaller than specified size as data URLs to avoid requests.
{ {
loader: require.resolve('css-loader'), test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
options: { loader: require.resolve('url-loader'),
importLoaders: 1, options: {
minimize: true, limit: 10000,
sourceMap: true, name: 'static/media/[name].[hash:8].[ext]',
}, },
}, },
// Process JS with Babel.
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
// @remove-on-eject-begin
babelrc: false,
presets: [require.resolve('babel-preset-react-app')],
// @remove-on-eject-end
compact: true,
},
},
// The notation here is somewhat confusing.
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader normally turns CSS into JS modules injecting <style>,
// but unlike in development configuration, we do something different.
// `ExtractTextPlugin` first applies the "postcss" and "css" loaders
// (second argument), then grabs the result CSS and puts it into a
// separate file in our build process. This way we actually ship
// a single CSS file in production instead of JS code injecting <style>
// tags. If you use code splitting, however, any async bundles will still
// use the "style" loader inside the async code so CSS from them won't be
// in the main CSS file.
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
Object.assign(
{ {
loader: require.resolve('postcss-loader'), fallback: require.resolve('style-loader'),
options: { use: [
// Necessary for external CSS imports to work {
// https://github.com/facebookincubator/create-react-app/issues/2677 loader: require.resolve('css-loader'),
ident: 'postcss', options: {
plugins: () => [ importLoaders: 1,
require('postcss-flexbugs-fixes'), minimize: true,
autoprefixer({ sourceMap: true,
browsers: [ },
'>1%', },
'last 4 versions', {
'Firefox ESR', loader: require.resolve('postcss-loader'),
'not ie < 9', // React doesn't support IE8 anyway options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
], ],
flexbox: 'no-2009', },
}), },
], ],
},
}, },
], extractTextPluginOptions
)
),
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
// "file" loader makes sure assets end up in the `build` folder.
// When you `import` an asset, you get its filename.
// This loader don't uses 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
// it's runtime that would otherwise processed through "file" loader.
// Also exclude `html` and `json` extensions so they get processed
// by webpacks internal loaders.
exclude: [/\.js$/, /\.html$/, /\.json$/],
options: {
name: 'static/media/[name].[hash:8].[ext]',
}, },
extractTextPluginOptions },
) // ** STOP ** Are you adding a new loader?
), // Make sure to add the new loader(s) before the "file" loader.
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`. ],
}, },
// ** STOP ** Are you adding a new loader?
// Remember to add the new extension(s) to the "file" loader exclusion list.
], ],
}, },
plugins: [ plugins: [
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment