Javascript React Web App在添加Url加载程序后显示空白或未呈现

我的React Web应用程序在添加

url加载程序之前使用
wabpack
正常

但是当我添加
url加载器时，它会显示为空白或不呈现任何内容


我的
webpack.config.js
文件

module: {

        // After add this code app show blank
        // ************************************
        loaders: [
            {
                test: /\.(js|.jsx|jpe?g|png|gif|svg|woff|woff2|eot|ttf)$/i,  // a regular expression that catches .js files
                exclude: /node_modules/,
                loader: 'url-loader',

            },

       // **************************
            {
                test: /\.(js|.jsx|jpe?g|png|gif|svg|woff|woff2|eot|ttf)$/i,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react','es2016', 'stage-0',],
                    plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
                }
            },
        ]
    },

控制台日志

两个规则具有完全相同的
test
正则表达式，这意味着它们将应用于相同的文件，这会导致冲突。在您的例子中，它为您的JavaScript文件使用了
url加载器
，并且
url加载器
将为您提供一个可以执行的而非JavaScript

您不应该有冲突的规则，并且应该只匹配有意义通过加载程序的文件。例如，
babel loader
仅适用于JavaScript，其他所有操作都将失败，因此它不应应用于JavaScript之外的任何操作

您的规则可能如下所示（我将其更改为使用Webpack2+语法，有关详细信息，请参阅）

这两个规则具有完全相同的
test
正则表达式，这意味着它们将应用于相同的文件，这会导致冲突。在您的例子中，它为您的JavaScript文件使用了
url加载器
，并且
url加载器
将为您提供一个可以执行的而非JavaScript

您不应该有冲突的规则，并且应该只匹配有意义通过加载程序的文件。例如，
babel loader
仅适用于JavaScript，其他所有操作都将失败，因此它不应应用于JavaScript之外的任何操作

您的规则可能如下所示（我将其更改为使用Webpack2+语法，有关详细信息，请参阅）

网页是否显示任何错误？您的web explorer是否有任何错误？@lilezek no hare no error show console.。您为什么试图在JavaScript文件上使用
url加载程序
？为什么你要在图像文件上使用
babel loader
？将您的
test
表达式限制为您希望每个加载程序处理的文件类型。@JoeClay问得好。。。。。。但是我不能通过
babel loader
加载css和svg文件。我在谷歌上搜索了一些东西，然后通过
url loader
得到了解决方案。我仍然不喜欢
url loader
网页包是否显示任何错误？您的web explorer是否有任何错误？@lilezek no hare no error show console.。您为什么试图在JavaScript文件上使用
url加载程序
？为什么你要在图像文件上使用
babel loader
？将您的
test
表达式限制为您希望每个加载程序处理的文件类型。@JoeClay问得好。。。。。。但是我不能通过
babel loader
加载css和svg文件，我在谷歌上搜索了一下，然后通过
url loader
得到了解决方案，但我还是不喜欢
url loader
谢谢你的完美回答。。你能告诉我为什么css会出错吗？你需要进行配置。但为什么@Michael在我已经使用
url加载器
的时候。为什么我们需要额外的东西，比如
css加载器
。。。。。那么为什么我们使用
babel loader
有什么好处呢？不同的文件类型需要不同的加载程序来执行不同的操作。例如，在将Sass转换为CSS时，它能够解析Sass语法并将这些额外功能转换为常规CSS，这是浏览器所理解的。每个加载器都专注于一件事，并且做得很好。他们经常利用现有的工具，这使得将这些工具与webpack结合起来更加容易。您是否需要巴贝尔加载器取决于您是否需要（新的JavaScript功能）。谢谢您的完美回答。。你能告诉我为什么css会出错吗？你需要进行配置。但为什么@Michael在我已经使用
url加载器
的时候。为什么我们需要额外的东西，比如
css加载器
。。。。。那么为什么我们使用
babel loader
有什么好处呢？不同的文件类型需要不同的加载程序来执行不同的操作。例如，在将Sass转换为CSS时，它能够解析Sass语法并将这些额外功能转换为常规CSS，这是浏览器所理解的。每个加载器都专注于一件事，并且做得很好。他们经常利用现有的工具，这使得将这些工具与webpack结合起来更加容易。您是否需要巴贝尔加载器取决于您是否需要（用于新的JavaScript功能）。
module: {
    rules: [
        {
            // For images and fonts.
            test: /\.(jpe?g|png|gif|svg|woff|woff2|eot|ttf)$/i,
            exclude: /node_modules/,
            loader: 'url-loader',
        },
        {
            // For JavaScript files (.js and .jsx)
            test: /\.jsx?$/i,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader',
            options: {
                presets: ['react','es2016', 'stage-0',],
                plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
            }
        },
    ]
}