Webpack2 自定义模块解析错误

Question

在我的 webpack 中，我有这个带有 webpack 块的配置

module.exports = createConfig([
  customConfig({
    resolve: {
      modules: [
        'src',
        'node_modules',
      ],
    },
  }),
  entryPoint({
    app: ['./src/client'],
  }),
  setOutput({
    path: path.resolve(__dirname, `../${assetPath}`),
    publicPath: `${publicPath}/`,
    filename: 'bundle.js',
  }),
  babel(),
  cssModules(),

我可以从 node_modules 导入，而且还可以从 src 文件的第一个目录导入

src
     components
          icons
               index.js
          navs
               primary.js
          containers
               index.js
          client.js

在 client.js 如果我这样做 import App from 'containers 它工作正常

但是如果在 primary.js 中，当我尝试避免像这样的相对导入时 import Icons from 'components/icons'

我收到这个错误

module.js:471
    throw err;
    ^

Error: Cannot find module 'components/icons'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function._module2.default._resolveFilename (/Users/abiodun/projects/***/****/node_modules/require-hacker/babel-transpiled-modules/require hacker.js:423:34)
    at Function.module._load (/Users/abiodun/projects/****/****/node_modules/piping/lib/piping.js:211:27)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/abiodun/projects/****/****/src/components/primary-nav/primary-nav.jsx:5:1)
    at Module._compile (module.js:570:32)
    at Module.require._compile (/Users/abiodun/projects/****/****/node_modules/webpack-isomorphic-tools/source/index.js:477:29)
    at loader (/Users/abiodun/projects/****/****/node_modules/babel-register/lib/node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .jsx] (/Users/abiodun/projects/****/****/node_modules/babel-register/lib/node.js:154:7)

如有任何帮助，我们将不胜感激

Answer 1

原来问题出在节点端，因为我正在进行同构服务器端渲染。我必须添加 'add-module-path' 模块以使节点需要来自 node_modules 以外的不同目录 npm i add-module-path --保存这是我的 rootServer.js 文件中的最终代码。

require('app-module-path').addPath(__dirname); // add this lines


const WebpackIsomorphicTools = require('webpack-isomorphic-tools');
const isomorphicConfig = require('./webpack/isomorphic.config');

global.__CLIENT__ = false;
global.__SERVER__ = true;
global.__DEVELOPMENT__ = process.env.NODE_ENV !== 'production';
if (global.__DEVELOPMENT__) {
  if (!require('piping')({ hook: true, ignore: /(\/\.|~$|\.json|\.scss$)/i, })) {}
  require('./babel');
  require('app-module-path').addPath('./src'); // add this path if it's development
}
else {
  require('app-module-path').addPath('./dist'); // add this part if it's production
}
const serverPath = global.__DEVELOPMENT__ ? 'src' : 'dist';
global.webpackIsomorphicTools = new WebpackIsomorphicTools(isomorphicConfig)
  .server('./', () => {
    require(`./${serverPath}/server`)();
  });

Webpack 在没有同构服务器端渲染的情况下可以很好地处理前端。

Webpack2 自定义模块解析错误

Webpack2 custom module resolve error

reactjs

webpack

webpack-2