无法解析 webpack 中的加载路径答案

【问题标题】：Cannot resolve load path in webpack无法解析 webpack 中的加载路径
【发布时间】：2016-01-31 13:45:08
【问题描述】：

我尝试将 gulp+browserify 迁移到 webpack，但在解析路径时遇到问题。

这是我的项目树：

/path/to/project
├── webpack.config.js
└── www/static
        ├── build
        │   ├── js
        │   │   ├── main.js <-------│ Output wanted
        │   │   └── main.js.map <---│
        ├── js
        │   ├── app.js
        │   ├── contact.js
        │   ├── device.js
        │   └── ...
        └── sass
            ├── main.scss
            └── partials
                ├── _helpers.scss
                ├── _mixins.scss
                └── _variables.scss

这是我的配置文件：

var path = require('path');

module.exports = {
    entry: { 'app': 'app.js' },

    resolve: {
        modulesDirectories: ['www/static/js/', './']
    },

    output: {
        filename: './www/static/build/js/main.js'
    },
    module: {
        loaders: []
    }
};

用于测试目的的app.js内容：

var $ = require('jquery'),
    Device = require('device'),
    Ga = require('ga');

require('jquery.raty');
require('jquery.autoNumeric');
require('jquery.unveil');

function initialize() {}

module.exports = {
    initialize: initialize,
};

当我启动 webpack 时，我收到了 webpack --display-error-details 的错误：

找不到入口模块中的错误：错误：无法解析“/path/to/project”中的“app” 在“/path/to/project”中解析“app” 解析的请求是一个模块未找到描述文件解析为模块 /Users/jordid/MAWork/MA_vagrant/apps/node_modules 不存在或不是目录 /Users/jordid/MAWork/MA_vagrant/node_modules 不存在或不是目录 /Users/jordid/MAWork/node_modules 不存在或不是目录 /Users/jordid/node_modules 不存在或不是目录 /Users/node_modules 不存在或不是目录 /node_modules 不存在或不是目录在 /path/to/project/node_modules 中寻找模块未找到描述文件未找到描述文件作为目录 /path/to/project/node_modules/app 不存在没有扩展 /path/to/project/node_modules/app 不存在 .js /path/to/project/node_modules/app.js 不存在 .json /path/to/project/node_modules/app.json 不存在

我不明白为什么 webpack 只在 node_modules 文件夹中搜索，而不在 'www/static/js/' 文件夹中搜索。

关于信息，我将有多个条目，但现在我只想要 webpack 工作。

感谢您的帮助。

【问题讨论】：

标签： webpack

【解决方案1】：

根据 webpack 文档，modulesDirectories 应该是一个目录名称数组。不是路径。

For example, if the value is ["mydir"], webpack will look in “./mydir”, “../mydir”, “../../mydir”, etc.

【讨论】：

是的，但我也尝试使用root: path.resolve(__dirname, '/www/static/js/') 而不是使用moduleDirectories，但它不起作用。我觉得resolve 选项都不适合我……我总是遇到同样的错误。

【解决方案2】：

知道了。

我必须使用context 选项：

entry: { 'app': 'app.js' },

resolve: {
    modulesDirectories: ['www/static/js/', './']
},

替换为：

entry: { 'app' : './app.js' },
context: path.resolve(__dirname, './www/static/js/'),

【讨论】：

【解决方案3】：

我不认为context 是处理这个问题的正确方法。

我只会将我的入口文件的路径设为绝对路径，然后忘记 resolve.modulesDirecories

但那只是我。

【讨论】：