Question

我的React网络应用程序在wabpack之前就可以了。在添加url-loader之前。

但是当我添加url-loader时，它显示为空白或不显示任何内容。

我的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'],
                }
            },
        ]
    },

CONSOLE.LOG

Answer 1

两个规则都具有完全相同的test正则表达式，这意味着它们将应用于相同的文件，这会导致冲突。在您的情况下，它使用url-loader作为您的JavaScript文件，url-loader将为您提供Data URL而不是可以执行的JavaScript。

您不应该有冲突的规则，您应该只匹配通过加载器有意义的文件。例如，babel-loader仅适用于JavaScript，其他所有内容都将失败，因此除了JavaScript之外，它永远不应该应用于任何其他内容。

您的规则可能看起来像这样（我将其更改为使用webpack 2+语法，有关详细信息，请查看official migration guide）。

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'],
            }
        },
    ]
}

添加Url-loader后，React Web-App显示空白或不显示

1 个答案: