![](/img/trans.png)
[英]React/Webpack Css imports from node_modules are not loading correctly
[英]Webpack + React: Webpack builds from my node_modules folder in correct order in one place, and incorrect order anywhere else
我是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
谢谢!
解决了! 原来,在复制/粘贴所有内容时,我只是没有将.babelrc文件传输到其他目录。 我认为是因为文件名以开头。 在它前面,我的Macbook将其视为隐藏文件,但直到现在我才注意到它。 除了有趣,这是我的.babelrc文件中的内容:
{
"presets": [
["latest", { "modules": false }],
"react"
]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.