带有“找不到模块”问题的 webpack resolve.root 设置答案

【问题标题】：webpack resolve.root setup with 'cant find module' issue带有“找不到模块”问题的 webpack resolve.root 设置
【发布时间】：2016-06-19 23:06:04
【问题描述】：

这是一个用webpack打包jsx文件的react项目，文件夹树如下：

.
|-- app
|   |-- client.jsx
│   |-- components
|     | -- ArticleCommentListItem.jsx
|     | -- ArticleCommentListItemFooter.jsx
|-- server
|   | -- index.js
|-- webpack
|   |-- webpack.config.js

首先，文件 ArticleCommentListItem.jsx 将调用模块 ArticleCommentListItemFooter.jsx，如下所示

import ArticleCommentListItemFooter from './ArticleCommentListItemFooter';

在阅读Resolving require paths with webpack 上 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.alias 进行webpack.config 设置，但它仍然以同样的错误退出。

resolve: {
  extensions: ['', '.js', '.jsx', '.scss', '.less'],
  alias: {
    components: path.join(__dirname, '..', 'app', 'components')
  },
  modulesDirectories: [
    'node_modules', 'app'
  ]
}

我不知道是哪一步出错了。

【问题讨论】：

标签： webpack

【解决方案1】：

~把“app”前面的“..”去掉再试一次~

更新：

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_config); var isDev = process.env.NODE_ENV === 'dev'; if (isDev) { app.use(require('webpack-dev-middleware')(compiler, { noInfo: true, publicPath: webpack_config.output.publicPath })); app.use(require('webpack-hot-middleware')(compiler)); }