Webpack + React:Webpack从我的node_modules文件夹以正确的顺序在一个地方构build,并且在其他地方的顺序不正确

我对Webpack和React很陌生。 我只是试图让一个简单的Webpack / Babel / React模板正常运行,所以我可以抓住它,开始在应用程序上工作,而不用担心每次都设置它。 不过,我遇到了一个奇怪的问题。

我用React使用Webpack,Node和Babel制作了Hello World。 问题是,它只能在我制作的特定目录中工作。如果我复制/粘贴所有内容,并尝试运行我的NPM脚本,则会在我的JSX文件中遇到“未知模板”错误。 经过一番调查,我很确定问题在于,由于某种原因,当我在原始目录之外运行一切时,Webpack以不同的顺序构build事物。

这是我从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之后构build我的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 

谢谢!

解决了! 原来,我只是没有将我的.babelrc文件复制/粘贴一切时转移到其他目录。 我认为是因为文件名以。 在我面前,我的Macbook把它当作一个隐藏的文件,直到现在我才注意到它。 除此之外,下面是我的.babelrc文件中的内容:

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