使用的WebPack

Question

我webpack.config.js解决JavaScript文件包含类似：

... 
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`; 

显然，这取决于你在哪个目录的相对路径是不同的