未找到模块:错误:无法解析模块的“组件/应用程序”。 webpack + reactjs问题
问题描述:
我是webpack中的新手,并作出反应。希望您能够帮助我。未找到模块:错误:无法解析模块的“组件/应用程序”。 webpack + reactjs问题
我遇到了问题,无法在互联网上找到任何工作解决方案。 当我试图运行webpack-dev-serverI geting“模块未找到:错误:无法解决模块'组件/应用程序'”的错误所有的时间。
这里是我的文件结构。
根/ 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()
]
};
根/ .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 /组件/应用.js
import React from 'react';
export default class App extends React.component {
render() {
return (
<div>
<h1>Hello There</h1>
</div>
);
}
}
答
我同意罗伯特Moskal答案,可以使用相对路径来导入,在同一时间,如果你真的想要的绝对路径工作,你可能需要在你的webpack.config.js
增加一个行你的决心段内的将它添加该线下方
root: path.resolve('./src'),
,这将有助于解决的根源,你可以使用从src文件夹内的文件夹的绝对路径轻松地导入。我会告诉你我的样本webpack.config.js
下面
'use strict';
const path = require('path');
const loaders = require('./webpack/loaders');
const plugins = require('./webpack/plugins');
const applicationEntries = process.env.NODE_ENV === 'development'
? ['webpack-hot-middleware/client?reload=true']
: [];
const mainEntry = process.env.NODE_ENV === 'development'
? './src/sample/index.tsx'
: './src/lib/index.tsx';
module.exports = {
entry: [mainEntry].concat(applicationEntries),
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js',
publicPath: '/',
sourceMapFilename: '[name].js.map',
chunkFilename: '[id].chunk.js',
},
devtool: process.env.NODE_ENV === 'production' ?
'source-map' :
'inline-source-map',
resolve: {
root: path.resolve('./src'),
extensions: [
'',
'.webpack.js',
'.web.js',
'.tsx',
'.ts',
'.js',
'.json',
],
},
plugins: plugins,
devServer: {
historyApiFallback: { index: '/' },
},
module: {
preLoaders: [
loaders.tslint,
],
loaders: [
loaders.tsx,
loaders.html,
loaders.css,
loaders.scss,
loaders.eot,
loaders.svg,
loaders.ttf,
loaders.woff,
loaders.json,
{
test: /\.png$/,
loader: 'url-loader',
query: { mimetype: 'image/png' },
},
],
},
externals: {
'react/lib/ReactContext': 'window',
'react/lib/ExecutionEnvironment': true,
'react/addons': true,
},
};
答
您需要在index.js文件中指定应用程序的相对路径。因此,
import App from './components/app'
没有相对路径表示法,模块导入系统在node_modules目录中查找。
+0
感谢鹰眼@RobertMoskal,它的工作原理 –
非常感谢@KeshShan您webpack.config.js例如根:path.resolve建议 –
@AntonArtemev没问题,很高兴我的答案帮助你! :) –
好的答案,但如果项目中的某个人提交了一个带有webpack hack的请求,我会指示他们只是遵循es6模块导入约定。 –