Webpack 2：無法解析模塊

Question

我有一個這樣的項目：

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一樣正常工作，但是我沒有用webpack 2解析myModule模塊，我得到“找不到模塊：無法在... \\ app中解析模塊”。

看來modulesDirectories條目被忽略，基本URL對應於條目的文件夾。

如何使用webpack 2正確解析模塊？

Answer 1

來自： http ： //moduscreate.com/webpack-2-tree-shaking-configuration/

在Webpack 2中， root ， modulesDirectories和fallback設置的解析器將合並為一個屬性 - modules 。 以下是我們如何在Webpack 2中解析文件和模塊位置：

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

您可以在modules指定多個目錄，但請確保不要忘記node_modules或npm包依賴項將無法加載。

---

那么就你的情況而言：

resolve: {
  modulesDirectories: ['core']
}

現在需要

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

Answer 2

編輯：正如其他人所說，對於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')]
};

Answer 3

感謝克里斯托弗戴維斯，我通過添加：

resolveLoader: {
  root: path.join(__dirname, 'node_modules')
},
resolve: {
    root: ['./core']
}

我不得不添加resolveLoader行，否則我收到有關無法加載的babel-loader的錯誤。