Webpack + React：Webpack在一個地方以正確的順序從我的node_modules文件夾構建，而在其他任何地方以錯誤的順序構建

Question

我是Webpack和React的新手。 我只是想讓一個簡單的Webpack / Babel / React模板正常運行，所以我可以抓住它並開始在應用程序上工作，而不必擔心每次都進行設置。 不過，我遇到了一個奇怪的問題。

我使用可正常工作的Webpack，Node和Babel用React制作了Hello World。 問題是，它只能在我進入的那個特定目錄中工作。如果我復制/粘貼所有內容並嘗試運行NPM腳本，則在JSX文件中會收到“未知模板”錯誤。 經過一番調查之后，我很確定問題是由於某些原因，當我在原始目錄之外運行所有內容時，Webpack會以不同的順序構建事物。

這是我從Webpack獲得的輸出，該輸出有效：

   [8] ./node_modules/react-dom/lib/ReactInstrumentation.js 601 bytes {0} [built]
  [11] ./node_modules/react-dom/lib/ReactUpdates.js 9.53 kB {0} [built]
  [14] ./node_modules/react/lib/ReactElement.js 11.2 kB {0} [built]
  [16] ./node_modules/react/lib/React.js 5.08 kB {0} [built]
  [49] ./node_modules/react/react.js 56 bytes {0} [built]
  [82] multi ./main.js 28 bytes {0} [built]
  [83] ./src/main.js 581 bytes {0} [built]
  [99] ./node_modules/react-dom/index.js 59 bytes {0} [built]

這是我不工作時得到的輸出。

   [8] ./node_modules/react-dom/lib/ReactInstrumentation.js 601 bytes {0} [built]
  [11] ./node_modules/react-dom/lib/ReactUpdates.js 9.53 kB {0} [built]
  [14] ./node_modules/react/lib/ReactElement.js 11.2 kB {0} [built]
  [16] ./node_modules/react/lib/React.js 5.08 kB {0} [built]
  [81] multi ./main.js 28 bytes {0} [built]
  [82] ./src/main.js 272 bytes {0} [built]
  [83] ./node_modules/react/react.js 56 bytes {0} [built]

如您所見，在無效的構建中，第[83] ./node_modules/react/react.js 56 bytes {0} [built]

在webpack構建我的main.js之后，而在可行的方法中，它先於我。

是否有發生這種情況的原因，並且是解決此問題的好方法？ 我很迷路。 這是我的webpack.config.js文件：

const path = require('path');

module.exports = {
    context: path.join(__dirname + '/src'),
    entry: [
        './main.js'
    ],
    output: {
        path: path.join(__dirname + '/www'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: [
                    'babel-loader'
                ],
            },
        ],
    },
    resolve: {
        modules: [
            path.join(__dirname + '/node_modules')
        ],
    },
};

編輯：有人問我的package.json文件，所以在這里是：

{
  "name": "simple_react_setup",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "compile": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-latest": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "express": "^4.15.4",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "webpack": "^3.5.5",
    "webpack-dev-middleware": "^1.12.0"
  }
}

當我將所有內容復制/粘貼到新目錄時，我實際上只是在復制整個目錄，因此代碼根本沒有變化。 我確保運行npm install。 我得到的錯誤是我的JSX文件中有一個未知的模板：

ERROR in ./src/Counter.js
Module build failed: SyntaxError: Unexpected token (16:12)

  14 |     render() {
  15 |         return (
> 16 |             <button

謝謝！

Answer 1

解決了！ 原來，在復制/粘貼所有內容時，我只是沒有將.babelrc文件傳輸到其他目錄。 我認為是因為文件名以開頭。 在它前面，我的Macbook將其視為隱藏文件，但直到現在我才注意到它。 除了有趣，這是我的.babelrc文件中的內容：

{
  "presets": [
    ["latest", { "modules": false }],
    "react"
  ]
}