Webpack中的Resolve.Alias

Question

我是reactjs的新手，我已经阅读了article，但我无法弄清楚如何。我正在尝试在导入时创建别名。这是有效的

import BootstrapCss from '../../../dist/static/bootstrap/css/bootstrap.css';

但这样做是没有运气的

import BootstrapCss from 'bootstrap';

在我的webpack.config.js我有这个

... resolve: { extensions: ['', '.js', '.jsx', 'css', '.scss', '.eot', '.ttf', '.svg', '.woff'], modulesDirectories: ['node_modules', 'scripts', 'images', 'fonts', 'dist'], alias: { bootstrap : path.resolve(__dirname, '/dist/static/bootstrap/css/bootstrap.css') } } ... 我不知道如何更改node_modules路径的路径我在

处遇到错误

Module not found: Error: Cannot resolve module 'bootstrap' in E:\path-to-folder\src\components\home resolve module bootstrap in E:\path-to-folder\src\components\home looking for modules in E:\path-to-folder\node_modules E:\path-to-folder\node_modules\bootstrap doesn't exist (module as directory) resolve 'file' bootstrap in E:\path-to-folder\node_modules

Answer 1

你可能想看看这个Babel插件：https://www.npmjs.com/package/babel-plugin-webpack-alias 这应该允许您在前端代码中使用这些别名。 （如果您有Babel配置工作）

除此之外，似乎在您的别名之前添加~应该可以解决问题。 （参考：https://github.com/kriasoft/react-starter-kit/issues/945）