當項目在其他文件夾中構建時，為什么React Web App的Webpack構建會失敗？

Question

我有一個使用Webpack構建的React項目。 奇怪的問題是，當我在原始文件夾中運行React應用程序時，它會構建並運行而沒有任何錯誤。 但是，當我復制文件夾中的所有文件時，請將其粘貼到新文件夾中，然后嘗試構建失敗的同一項目。 我嘗試更改文件夾名稱，更改配置文件以反映新的文件夾名稱，但是它在app.js中始終失敗，並指向render方法中的錯誤。 需要注意的幾點：

• 我沒有硬編碼任何路徑
• 我已經清理了節點模塊，並從零開始重新構建了項目，包括清理npm緩存。
• 同一項目在我的原始文件夾中運行，沒有任何錯誤。

我得到的錯誤如下：

       Version: webpack 2.2.1
       Time: 1520ms
       Asset       Size  Chunks             Chunk Names
       app.js     219 kB       0  [emitted]  main
       index.html  636 bytes          [emitted]  
       chunk    {0} app.js (main) 208 kB [entry] [rendered]
       [1] (webpack)/buildin/global.js 509 bytes {0} [built]
       [32] ./src/app.js 783 bytes {0} [built] [failed] [1 error]
       [33] (webpack)-dev-server/client?http://0.0.0.0:8080 4.16 kB {0} 
       [built]
       [34] ./~/ansi-regex/index.js 135 bytes {0} [built]
       [35] ./~/punycode/punycode.js 14.7 kB {0} [built]
       [36] ./~/querystring-es3/decode.js 2.51 kB {0} [built]
       [38] ./~/querystring-es3/index.js 127 bytes {0} [built]
       [40] ./~/sockjs-client/lib/entry.js 244 bytes {0} [built]
       [47] ./~/sockjs-client/lib/main.js 11.9 kB {0} [built]
       [49] ./~/sockjs-client/lib/transport-list.js 613 bytes {0} 
       [built]
       [66] ./~/strip-ansi/index.js 161 bytes {0} [built]
       [68] ./~/url/url.js 23.3 kB {0} [built]
       [69] ./~/url/util.js 314 bytes {0} [built]
       [70] (webpack)-dev-server/client/socket.js 897 bytes {0} [built]
       [72] multi (webpack)-dev-server/client?http://0.0.0.0:8080 
       ./src/app.js 
       40 bytes {0} [built]
       + 58 hidden modules

       ERROR in ./src/app.js
       Module build failed: SyntaxError: Unexpected token (39:2)

       37 | // }); 
       38 | ReactDOM.render(
       > 39 |   <div>Hello</div>,
       |   ^
       40 |   document.getElementById('content'),
       41 | );
       42 | 

       @ multi (webpack)-dev-server/client?http://0.0.0.0:8080 
       ./src/app.js
       Child html-webpack-plugin for "index.html":
       chunk    {0} index.html 542 kB [entry] [rendered]
       [0] ./~/lodash/lodash.js 540 kB {0} [built]
       [1] (webpack)/buildin/global.js 509 bytes {0} [built]
       [2] (webpack)/buildin/module.js 517 bytes {0} [built]
       [3] ./~/html-webpack-plugin/lib/loader.js!./src/index.html 1.32 
       kB 
       {0} [built]
       webpack: Failed to compile.

在我的原始文件夾中運行時，不會發生上述錯誤。 這是什么問題？

Answer 1

您的.babelrc文件位於項目目錄的根目錄中，因此webpack會在其中查找該文件以使用您的加載程序和預設。 您可以使用以下配置來解決

    {
      use: [
        {
          loader: 'babel-loader',
          options: {
            babelrc: false,
            presets: [require.resolve('babel-preset-react-app')], // <- Whatever preset you wish
            cacheDirectory: true,
          }
        }
      ],
      test: /\.js$/,
      exclude: /node_modules/
    },