Webpack 2:无法解析模块

时间:2016-07-01 15:26:08

标签: javascript webpack webpack-2

我有一个这样的项目:

root/
    webpack-config.js
    app/
       app.js
       js/
         dep.js
    core/
        module.js

这是webpack配置文件:

module.exports = {
    entry: './app/app.js',
    output: {
        path: __dirname,
        filename: "[name]-bundle.js"
    },
    module: {
        loaders: [
            { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/     }          
        ]
    },
    resolve: {
      modulesDirectories: ['core']
    }
    ...

在app.js中,我有:

import local_dep from './js/dep';
import myModule from 'module';

这与webpack 1.x一样正常,但myModule模块没有用webpack 2解决,我得到了"找不到模块:无法解决&#39 ;模块'在... \ app"。

似乎忽略modulesDirectories条目,基本URL对应于条目文件夹。

如何使用webpack 2正确解析模块?

3 个答案:

答案 0 :(得分:12)

来自:http://moduscreate.com/webpack-2-tree-shaking-configuration/

在Webpack 2中,来自rootmodulesDirectoriesfallback设置的解析器将合并为一个属性 - modules。以下是我们如何在Webpack 2中解析文件和模块位置:

  resolve: {
    modules: [
      path.resolve('./client'),
      'node_modules'
    ]
  },

您可以在modules中指定多个目录,但请确保不要忘记node_modules或npm包依赖项将无法加载。

所以在你的情况下,之前是:

resolve: {
  modulesDirectories: ['core']
}

现在需要

resolve: {
  modules: ['core'] // also 'node_modules' 
}

答案 1 :(得分:4)

编辑:正如其他人所说,对于 Webpack 2 ,这样的事情可行:

{
  resolve: {
    extensions: ['.js', '.jsx'],
    modules: ['node_modules', path.resolve(__dirname, 'core')]
  },
}

对于 Webpack 1 ,我有一个具有此条目的设置:

config.resolve = {
  // Allows us to include js and jsx files without specifying the extension
  extensions: ['', '.jsx', '.js'],

  root: [path.resolve('./core')]
};

答案 2 :(得分:-4)

感谢克里斯托弗戴维斯,我通过添加:

解决了这个问题
resolveLoader: {
  root: path.join(__dirname, 'node_modules')
},
resolve: {
    root: ['./core']
}

我必须添加resolveLoader行,否则我收到有关无法加载的babel-loader的错误。