From 5c2216ca0ea269a6e4ca4b9f07a596220fc765f7 Mon Sep 17 00:00:00 2001 From: Andreas Hoffmann Date: Sun, 9 Jul 2017 22:59:19 +0200 Subject: [PATCH] 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 --- .../config/webpack.config.dev.js | 154 +++++++------- .../config/webpack.config.prod.js | 192 +++++++++--------- 2 files changed, 171 insertions(+), 175 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index ea749495b5b..253bc34f062 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -150,97 +150,95 @@ module.exports = { ], 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)$/, - 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 - // 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