我是webpack的新手并做出反应 . 希望您能够帮助我 .
我遇到了一个问题,在互联网上找不到任何有效的解决方案 . 当我试图运行webpack-dev-serverI geting“模块未找到:错误:无法解析模块'组件/ app'”错误一直 .
这是我的文件结构 .
root / webpack.config.js
var webpack = require('webpack');
var path = require('path');
module.exports = {
devtool: 'inline-source-map',
entry: [
'webpack-dev-server/client?http://127.0.0.1:8080/',
'webpack/hot/only-dev-server',
'./src'
],
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js'
},
resolve: {
moduleDirectories: ['node_modules', 'src'],
extensions: ['', '.js']
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['es2015', 'react']
}
}]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin()
]
};
root / .babelrc
{
presets: ["react", "es2015"],
plugins: ["react-hot-loader/babel"]
}
根/ SRC / index.js
import React from 'react';
import { render } from 'react-dom';
import App from 'components/app';
render(<App />, document.getElementById('app'));
根/ SRC /组件/ app.js
import React from 'react';
export default class App extends React.component {
render() {
return (
<div>
<h1>Hello There</h1>
</div>
);
}
}
2 回答
我同意 Robert Moskal 回答,使用相对路径导入,同时如果你真的想要绝对路径工作,你可能需要在你的解析部分的
webpack.config.js
中再添加一行,在下面添加这行这将有助于解析root,您可以使用src文件夹中文件夹的绝对路径轻松导入 . 我会在下面给你看看我的样本
webpack.config.js
您需要在index.js文件中指定app的相对路径 . 所以
如果没有相对路径表示法,模块导入系统将在node_modules目录中查找 .