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