反应Web应用程序显示空白或不添加后添加Url-loader

Question

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

但是，当我添加url-loader它显示为空或不显示任何东西。

MY Project File Link with Github

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