Question

我的webpack.config.js包含类似的内容：

...
module.exports = {
  entry: './app.js',
  output: { path: __dirname + "/dist/", filename: 'bundle.js' },
  resolve: {
    root: path.resolve('./js')
  }
  ....
}

文档提示resolve can have a root值。但我得到以下错误。

$ node ./node_modules/webpack/bin/webpack.js
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.resolve has an unknown property 'root'. These properties are valid:
   object { alias?, aliasFields?, cachePredicate?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, unsafeCache?, useSyncFileSystemCalls? }

我对modulesDirectories也一样。不确定我应该使用哪种，或者两种情况。知道我怎么能把我的JS文件拉进去吗？

Answer 1

您已查看了webpack的文档1. Webpack 2已删除resolve.root并将其统一到resolve.modules，如官方webpack 2文档的Migration Guide所示。

使用webpack 2执行此操作的正确方法是：

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

但你可能误解了该选项的作用。不包含这些路径中的所有文件。 Webpack从您的入口点开始，只处理正在导入的文件（另请参阅Core Concepts）。因此，如果您希望webpack包含您的JavaScript文件，则需要在某些时候导入它们。

相反，此选项告诉webpack在导入模块时查找模块的位置（不使用相对路径）。默认情况下，只有node_modules用于解析Module paths，就像Node.js一样。

例如，使用此目录结构：

js
├─ components
│   └─ main.js
└─ utils
    └─ helper.js

您可以使用以下项目从项目的任何位置导入helper.js文件：

import helper from 'utils/helper';

如果您没有将js/添加到resolve.modules，则需要使用相对路径导入它。因此，例如在js/components/main.js中，导入将如下所示：

import helper from '../utils/helper`;

显然，相对路径会有所不同，具体取决于您所在的目录。

使用webpack

1 个答案: