在React应用中使用Webpack resolve.alias绝对导入

复合三明治

我正在开发一个不内置的React应用,create-react-app并尝试与Webpack一起使用以使绝对导入有效。应用程序结构如下所示:

.
├── package-lock.json
├── package.json
├── public
│   └── index.html
├── src
│   ├── actions
│   ├── components
│   │   └── App.js
│   ├── index.css
│   ├── index.js
│   ├── reducers
│   │   └── index.js
│   ├── storage
│   │   └── index.js
│   └── store.js
└── webpack.config.js

我拥有store.js文件以及storage目录的原因是因为绝对导入无法正常工作(这就是为什么我要通过相对导入from来使其正常工作的原因store.js)。以下是我webpack.config.js根据其文档和其他SO线程为绝对导入所做的事情

resolve: {
        alias: {
            src: path.resolve(__dirname, 'src/'),
        },
        extensions: ['.js']
},

但是,尽管添加了规则,但我仍然收到以下错误:

ERROR in ./src/storage/index.js
Module not found: Error: Can't resolve './reducers' in '/my-project/src/storage'

我只是import rootReducer from './reducers';storage/index.js文件中提取错误的来源。在这种情况下,正确配置webpack.alias对象的一种好方法是什么?

复合三明治

正如Prakash上面指出的,这是我需要做的:

resolve: {
        alias: {
            components: path.resolve(__dirname, 'src/components'),
            reducers: path.resolve(__dirname, 'src/reducers')
        },
        extensions: ['.js']
    },

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

resolve.alias 不工作 webpack 2

Webpack resolve.alias不能与打字稿一起使用吗?

不能使用resolve.alias进行JEST测试

如何使用bazel / webpack设置绝对导入?

Webpack-resolve.moduleDirectories

使用Webpack在TypeScript React应用程序中导入SVG

使用React + Webpack时如何使用绝对路径导入自定义scss?

绝对导入Webpack 2的最佳方法是?

在通过ZEIT Now部署的Next.js应用中使用绝对导入

无法使用绝对路径导入

如何在Expo和React Native中使用绝对路径导入?

在app.config中使用resolve

在React应用程序中使用Jest模拟导入/模块

使用绝对路径导入React组件

在Webpack配置规则中使用require.resolve的目的是什么?

带有Webpack的resolve.root选项的同构React

如何在python 3.6中使用绝对导入和相对导入?

如何在Python 3中使用绝对导入来导入位于其父目录中的包?

如何使用Webpack构建React应用并导入资产文件夹?

如何解决使用绝对路径导入?

使用React.lazy与Webpack动态导入?

基于角度组件的方法并在Router中使用resolve

在使用ParcelJS构建的Cypress测试中,如何在绝对路径中使用导入?

如何在webpack中使用angular-cli在angular2应用程序中导入xml2js

在打字稿中使用绝对路径进行导入

将Promise与resolve()和then()方法的使用混淆

如何将Backbone / RequireJS模块导入React / Webpack应用

无法在React组件中使用process.env,但可以将其导入webpack.config.js中

绝对导入如何与sitecustomize.py中不相关的导入一起使用?

TOP 榜单

热门标签

归档