방금 React를 배우기 시작했고 Webpack으로 구현하고 있습니다.
다음은 devDependencies
내입니다 package.json
.
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"react-hot-loader": "^1.3.1",
"react-scripts": "1.0.7",
"serve": "^5.2.4",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"
},
여기 내 webpack.config.js
:
module.exports = {
context: __dirname + "/src",
entry: './index.js',
output: {
filename: "index.js",
path: __dirname + '/dist'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loaders: ["react-hot-loader", "babel-loader"],
}
],
},
}
여기 있습니다 .babelrc
{
"presets": [
"es2015",
"react"
]
}
이제 실행 npm start
하면이 오류가 발생합니다.
ERROR in ./src/index.css
Module parse failed: /home/tps/ReactApps/login-app/src/index.css Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
| body {
| margin: 0;
| padding: 0;
@ ./src/index.js 21:0-22
@ multi ./node_modules/webpack-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./index.js
ERROR in ./src/App.js
Module not found: Error: Can't resolve './notFound' in '/home/tps/ReactApps/login-app/src'
@ ./src/App.js 33:16-37
@ ./src/index.js
@ multi ./node_modules/webpack-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./index.js
ERROR in ./src/App.css
Module parse failed: /home/tps/ReactApps/login-app/src/App.css Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| .App {
| text-align: center;
| }
@ ./src/App.js 19:0-20
@ ./src/index.js
@ multi ./node_modules/webpack-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./index.js
이 문제를 해결하도록 도와주세요.
편집 1 :
webpack.config.js
module.exports = {
context: __dirname + "/src",
entry: './index.js',
output: {
filename: "index.js",
path: __dirname + '/dist'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loaders: ["react-hot-loader", "babel-loader"],
}
],
rules: [
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
}
package.json
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.4",
"react-hot-loader": "^1.3.1",
"react-scripts": "1.0.7",
"serve": "^5.2.4",
"style-loader": "^0.18.2",
"webpack": "^3.0.0",
"webpack-dev-server": "^2.5.0"
},
css 파일을 가져올 수 있으려면 웹팩 구성에 css-loader를 추가해야합니다.
npm install --save-dev css-loader style-loader
loaders
웹팩 구성 의 어레이에 다음을 추가하십시오 .
{
test: /\.css$/,
loader: 'style-loader!css-loader'
}
자세한 정보는 https://github.com/webpack-contrib/css-loader 를 확인 하십시오 .
편집 : 로더와 규칙을 모두 사용하고 있습니다. 그것들은 기본적으로 같은 것입니다. 자세한 정보는 https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules 를 확인하십시오.
이 웹팩 구성을 시도하십시오.
module.exports = {
context: __dirname + "/src",
entry: './index.js',
output: {
filename: "index.js",
path: __dirname + '/dist'
},
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loaders: ["react-hot-loader", "babel-loader"],
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
]
},
}
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다