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文件夹以正确的顺序在一个地方构建，并且在其他地方的顺序不正确

回答

相关问题