找不到模块：错误：无法parsing模块的“组件/应用程序”。 webpack + reactjs问题
我是新手在webpack和反应。 希望您能够帮助我。
我遇到了一个问题，在互联网上找不到任何工作解决scheme。 当我试图运行webpack-dev-serverI geting“模块未find：错误：无法解决模块的组件/应用程序”错误的所有时间。
在这里我的文件结构。
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> ); } }
我同意罗伯特Moskal答案，使用相对path导入，同时，如果你真的想要绝对path工作，你可能不得不在你的webpack.config.js里添加一个你的解决scheme部分，它添加下面线
root: path.resolve('./src'),
这将有助于解决根目录问题，并且可以使用src文件夹内的文件夹的绝对path轻松导入。 我会告诉你我的示例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文件中指定一个相对path。 所以
import App from './components/app'
如果没有相对path表示法，模块导入系统将在node_modules目录中查找。