我正在尝试在Ruby on Rails应用上构建react组件。我将webpack环境放在/client
中,并将捆绑的文件放入/app/assets/javascripts/webpack/
。但是,当我启动webpack并尝试构建组件时,它会显示Module not found: Error: Cannot resolve 'file' or 'directory' /components/favorite_box
。以下是我的代码。请教我什么问题。
client
├─ src
│ ├ components
│ │ └─ favorite_box.js.jsx
│ └─index.js
├─ node_modules
├─ package.json
└─ webpack.config.js
favorite_box.js.jsx
import React from 'react'
import ReactDOM from 'react-dom'
export default class FavoriteBox extends React.Component {
// ...
render() {
return (
<div className="FavoriteBox">
</div>
)
}
}
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import FavoriteBox from './components/favorite_box.js.jsx'
ReactDOM.render(
<FavoriteBox/>,
document.getElementById('favorite_box')
)
webpack.config.js
module.exports = {
entry: {
app: './src/index.js',
},
output: {
path: '../app/assets/javascripts/webpack',
filename: '[name].js',
},
module: {
loaders: [
{ test: /\.(js|jsx)$/,
loader: "babel",
exclude: /node_modules/,
query: {
presets: ["es2015", "react"],
}
},
]
},
}
的package.json
{
"private": true,
"scripts": {
"webpack-watch": "webpack -w",
"webpack-build": "webpack -p"
},
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"webpack": "^1.13.1"
},
"dependencies": {
"react": "^15.2.1",
"react-dom": "^15.2.1"
}
}