Webpack 使用';找不到模块';问题

Webpack 使用';找不到模块';问题,webpack,Webpack,这是一个react项目,带有用于捆绑jsx文件的webpack,文件夹树如下所示: . |-- app | |-- client.jsx │ |-- components | | -- ArticleCommentListItem.jsx | | -- ArticleCommentListItemFooter.jsx |-- server | | -- index.js |-- webpack | |-- webpack.config.js 首先,文件Artic

这是一个react项目,带有用于捆绑jsx文件的webpack,文件夹树如下所示:

.
|-- app
|   |-- client.jsx
│   |-- components
|     | -- ArticleCommentListItem.jsx
|     | -- ArticleCommentListItemFooter.jsx
|-- server
|   | -- index.js
|-- webpack
|   |-- webpack.config.js
首先,文件ArticleCommentListItem.jsx将调用模块ArticleCommentListItemFooter.jsx,如下所示

import ArticleCommentListItemFooter from './ArticleCommentListItemFooter';
在阅读了上的Alex Klibisz的答案后。我想尝试以以下格式调用模块:

import ArticleCommentListItemFooter from 'components/ArticleCommentListItemFooter';
然后我在webpack.config.js文件中进行设置

var webpack_config = {
  entry:{
    app: path.join(__dirname, '..', 'app', 'client')
  },
  output: {
    path: assetsPath,
    filename: '[name].js',
    publicPath: '/assets/'
  },
  resolve: {
    extensions: ['', '.js', '.jsx', '.scss', '.less'],
    root: path.resolve(__dirname, '..', 'app'),
    modulesDirectories: [
      'node_modules'
    ]
  }
}
将client.jsx绑定到app.js时,一切都运行良好,但当我使用命令
node server/index.js启动服务器时。它将带着错误退出

error: Cannot find module 'components/ArticleCommentListItemFooter'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:289:25)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (/Users/ryu/Documents/git/react/react-blog/app/components/ArticleCommentListItem.jsx:21:37)
    at Module._compile (module.js:425:26)
    at loader (/Users/ryu/Documents/git/react/react-blog/node_modules/babel-register/lib/node.js:128:5)
    at Object.require.extensions.(anonymous function) [as .jsx] (/Users/ryu/Documents/git/react/react-blog/node_modules/babel-register/lib/node.js:138:7)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:313:12)
我想不出我犯了哪一步错误。

~请删除“应用”之前的“.”,然后重试~

更新:

resolve.root
resolve.alias
仅适用于在webpack上运行的脚本


您的server/index.js不知道这些值是否存在。所以它不知道如何找到“components/something.jsx”。您可能还应该通过webpack解析服务器js?

很抱歉回复太晚。甚至在webpack client.jsx文件的第一步都不起作用。更新了答案。。您的服务器不知道webpack配置文件我认为这应该是原因,首先,然后我在
server/index.js
文件上进行了以下设置。它仍然不工作。var config=require('config');var webpack=require('webpack');var webpack_config=require('../webpack/'+config.webpackConf);var编译器=webpack(webpack\u config);var isDev=process.env.NODE_env=='dev';if(isDev){app.use(require('webpack-dev-middleware')(编译器,{noInfo:true,publicPath:webpack_config.output.publicPath}));app.use(require('webpack-hot-middleware')(编译器));}
resolve: {
  extensions: ['', '.js', '.jsx', '.scss', '.less'],
  alias: {
    components: path.join(__dirname, '..', 'app', 'components')
  },
  modulesDirectories: [
    'node_modules', 'app'
  ]
}