Webpack + React：Webpack 从我的 node_modules 文件夹以正确的顺序在一个地方构建，而在其他任何地方的顺序不正确答案

【问题标题】：Webpack + React: Webpack builds from my node_modules folder in correct order in one place, and incorrect order anywhere elseWebpack + React：Webpack 从我的 node_modules 文件夹以正确的顺序在一个地方构建，而在其他任何地方的顺序不正确
【发布时间】：2018-02-03 16:54:27
【问题描述】：

我对 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

谢谢！

【问题讨论】：

标签： javascript node.js reactjs webpack babeljs

【解决方案1】：

已解决！原来我只是在复制/粘贴所有内容时没有将我的 .babelrc 文件转移到其他目录。我认为是因为文件名以 .在它前面，我的 Macbook 将其视为隐藏文件，直到现在我才注意到它。除了有趣之外，这是我的 .babelrc 文件中的内容：

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

【讨论】：