未找到模块：错误：无法解析模块的“组件/应用程序”。 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> 
     ); 
    } 
}

来源

2016-10-22 Anton Artemev

我同意罗伯特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, 
    }, 

};

来源

2016-10-22 14:55:43

非常感谢@KeshShan您webpack.config.js例如根：path.resolve建议 –

@AntonArtemev没问题，很高兴我的答案帮助你！ :) –

好的答案，但如果项目中的某个人提交了一个带有webpack hack的请求，我会指示他们只是遵循es6模块导入约定。 –

您需要在index.js文件中指定应用程序的相对路径。因此，

import App from './components/app'

没有相对路径表示法，模块导入系统在node_modules目录中查找。

来源

2016-10-22 14:39:05

感谢鹰眼@RobertMoskal，它的工作原理 –

未找到模块：错误：无法解析模块的“组件/应用程序”。 webpack + reactjs问题

回答

相关问题