我有一个应用程序的结构(node_modules
此列表中排除的目录):
├── 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配置:
{
"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
内容是这样的:
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
某种方式对其进行配置以了解此类路径吗?
你的文件结构说该文件夹名称以大写字母C开头Container
。但是,你想通过container
小写字母c导入它。你将需要更改导入或文件夹名称,因为路径区分大小写。
这也对我有帮助。Windows的文件名以大写字母开头没有问题,但是ubuntu出现了问题。
我有一个问题,因为我有一个旧的webpack.config.js。我们已经切换到使用模板webpack.config.babel.js,并且运行webpack时,旧文件将覆盖babel模板。