Webpack + React：Webpack從我的node_modules文件夾以正確的順序在一個地方構建，並且在其他地方的順序不正確

我對Webpack和React很陌生。我只是試圖讓一個簡單的Webpack/Babel/React模板正常運行，所以我可以抓住它並開始在應用程序上工作，而不用擔心每次都設置它。不過，我遇到了一個奇怪的問題。Webpack + React：Webpack從我的node_modules文件夾以正確的順序在一個地方構建，並且在其他地方的順序不正確

我用React使用Webpack，Node和Babel製作了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

謝謝！

來源

2017-08-25 amacdonald

已解決！原來，我只是沒有將我的.babelrc文件轉移到其他目錄時複製/粘貼的一切。我認爲是因爲文件名以a開頭。在我面前，我的Macbook把它當作一個隱藏的文件，直到現在我才注意到它。除此之外，下面是我的.babelrc文件中的內容：

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

來源

2017-08-25 20:48:52 amacdonald

Webpack + React：Webpack從我的node_modules文件夾以正確的順序在一個地方構建，並且在其他地方的順序不正確

回答

相關問題