From d6dbfc0353f5595b9bfd389a7694214744e1711a Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 15 May 2017 23:47:28 +0100
Subject: [PATCH] Support hoisting react-scripts and add require.resolve() to
loaders (#2166)
* Support hoisting react-scripts
* require.resolve() loaders and configs
This makes it so that loaders and configs are resolved relative to the config rather than to the app. This seems to make more sense to me.
---
.../config/webpack.config.dev.js | 27 ++++++-------------
.../config/webpack.config.prod.js | 27 ++++++-------------
2 files changed, 16 insertions(+), 38 deletions(-)
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index a7cce11aa..9e0f7e145 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -98,17 +98,6 @@ module.exports = {
'react-native': 'react-native-web',
},
},
- // @remove-on-eject-begin
- // Resolve loaders (webpack plugins for CSS, images, transpilation) from the
- // directory of `react-scripts` itself rather than the project directory.
- resolveLoader: {
- modules: [
- paths.ownNodeModules,
- // Lerna hoists everything, so we need to look in our app directory
- paths.appNodeModules,
- ],
- },
- // @remove-on-eject-end
module: {
strictExportPresence: true,
rules: [
@@ -125,13 +114,13 @@ module.exports = {
formatter: eslintFormatter,
// @remove-on-eject-begin
baseConfig: {
- extends: ['react-app'],
+ extends: [require.resolve('eslint-config-react-app')],
},
ignore: false,
useEslintrc: false,
// @remove-on-eject-end
},
- loader: 'eslint-loader',
+ loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
@@ -156,7 +145,7 @@ module.exports = {
/\.jpe?g$/,
/\.png$/,
],
- loader: 'file-loader',
+ loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
@@ -166,7 +155,7 @@ module.exports = {
// A missing `test` is equivalent to a match.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
- loader: 'url-loader',
+ loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
@@ -176,7 +165,7 @@ module.exports = {
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
- loader: 'babel-loader',
+ loader: require.resolve('babel-loader'),
options: {
// @remove-on-eject-begin
babelrc: false,
@@ -196,15 +185,15 @@ module.exports = {
{
test: /\.css$/,
use: [
- 'style-loader',
+ require.resolve('style-loader'),
{
- loader: 'css-loader',
+ loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
- loader: 'postcss-loader',
+ loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
plugins: () => [
diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js
index fc8869de8..64e519ec8 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -95,17 +95,6 @@ module.exports = {
'react-native': 'react-native-web',
},
},
- // @remove-on-eject-begin
- // Resolve loaders (webpack plugins for CSS, images, transpilation) from the
- // directory of `react-scripts` itself rather than the project directory.
- resolveLoader: {
- modules: [
- paths.ownNodeModules,
- // Lerna hoists everything, so we need to look in our app directory
- paths.appNodeModules,
- ],
- },
- // @remove-on-eject-end
module: {
strictExportPresence: true,
rules: [
@@ -124,13 +113,13 @@ module.exports = {
// TODO: consider separate config for production,
// e.g. to enable no-console and no-debugger only in production.
baseConfig: {
- extends: ['react-app'],
+ extends: [require.resolve('eslint-config-react-app')],
},
ignore: false,
useEslintrc: false,
// @remove-on-eject-end
},
- loader: 'eslint-loader',
+ loader: require.resolve('eslint-loader'),
},
],
include: paths.appSrc,
@@ -154,7 +143,7 @@ module.exports = {
/\.jpe?g$/,
/\.png$/,
],
- loader: 'file-loader',
+ loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
@@ -163,7 +152,7 @@ module.exports = {
// assets smaller than specified size as data URLs to avoid requests.
{
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
- loader: 'url-loader',
+ loader: require.resolve('url-loader'),
options: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]',
@@ -173,7 +162,7 @@ module.exports = {
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
- loader: 'babel-loader',
+ loader: require.resolve('babel-loader'),
// @remove-on-eject-begin
options: {
babelrc: false,
@@ -198,17 +187,17 @@ module.exports = {
loader: ExtractTextPlugin.extract(
Object.assign(
{
- fallback: 'style-loader',
+ fallback: require.resolve('style-loader'),
use: [
{
- loader: 'css-loader',
+ loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
minimize: true,
},
},
{
- loader: 'postcss-loader',
+ loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
plugins: () => [
--
GitLab