未找到模塊：錯誤：無法解析模塊的「組件/應用程序」。 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問題

回答

相關問題