У меня есть эта структура приложения (node_modules
dir исключается из этого списка):
├── actions.js
├── bundle.js
├── components
│ ├── App.js
│ ├── Footer.js
│ ├── Link.js
│ ├── Todo.js
│ └── TodoList.js
├── Containers
│ ├── AddTodo.js
│ ├── FilterLink.js
│ └── VisibleTodoList.js
├── index.html
├── index.js
├── main.js
├── package.json
├── package-lock.json
├── reducers.js
└── webpack.config.js
Моя конфигурация webpack выглядит так:
module.exports = {
entry: "./main.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
};
npm config:
{
"name": "webpack-redux",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "nothing"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel": "^6.23.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"webpack": "^3.5.5"
},
"dependencies": {
"react": "^15.6.1",
"babel-preset-react": "^6.24.1",
"react-dom": "^15.6.1",
"react-redux": "^5.0.6",
"redux": "^3.7.2"
}
}
Когда я запускаю команду webpack
, я получаю эту ошибку:
ERROR in ./components/App.js
Module not found: Error: Can't resolve '../containers/AddTodo' in '/home/oerp/js-programs/redux-test/components'
@ ./components/App.js 11:15-47
@ ./index.js
@ ./main.js
ERROR in ./components/Footer.js
Module not found: Error: Can't resolve '../containers/FilterLink' in '/home/oerp/js-programs/redux-test/components'
@ ./components/Footer.js 11:18-53
@ ./components/App.js
@ ./index.js
@ ./main.js
ERROR in ./components/App.js
Module not found: Error: Can't resolve '../containers/VisibleTodoList' in '/home/oerp/js-programs/redux-test/components'
@ ./components/App.js 15:23-63
@ ./index.js
@ ./main.js
components/App.js
моих components/App.js
:
import Footer from './Footer'
import AddTodo from '../containers/AddTodo'
import VisibleTodoList from '../containers/VisibleTodoList'
const App = () => (
<div>
<AddTodo />
<VisibleTodoList />
<Footer />
</div>
)
export default App
И, например, containers/AddTodo.js
:
import { connect } from 'react-redux'
import { addTodo } from '../actions'
let AddTodo = ({ dispatch }) => {
let input
return (
<div>
<form
onSubmit={e => {
e.preventDefault()
if (!input.value.trim()) {
return
}
dispatch(addTodo(input.value))
input.value = ''
}}
>
<input
ref={node => {
input = node
}}
/>
<button type="submit">
Add Todo
</button>
</form>
</div>
)
}
AddTodo = connect()(AddTodo)
export default AddTodo
Кажется, он не понимает относительный путь с двойными точками, например ../something
?
Нужно ли мне как-то настраивать webpack
для понимания таких путей?