gpt4 book ai didi

javascript - webpack 看不到绝对路径

转载 作者:行者123 更新时间:2023-11-30 19:43:18 25 4
gpt4 key购买 nike

我在我的 React 应用程序中使用绝对路径。但是 WebPack 抛出一个错误。 ERROR in ./src/index.js Module not found: Error: Can't resolve 'App' in .../client/src' 但是,我的文件位于此文件夹中。如何解决这个问题呢?我看到我已经写过类似的问题,但我没有在其中找到答案

网络包配置

    const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '/',
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'
},
{
test: /\.css$/, use: ['style-loader', 'css-loader'],
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: './public/index/html'
}),
new MiniCssExtractPlugin({
filename: 'style.css'
})
]
};

我的文件的层次结构

---project
--client
-public
index.html
-src
'folders'
index.js
App.js
App.css
--package.json
--webpack.config.js
--.babelrc

最佳答案

您可以将其添加到您的 webpack.config 文件中。

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

然后你可以导入

从'src/index.js'导入一些东西

但是如果你使用 Webpack 以外的东西,例如开玩笑,Storybook 那么您还需要应用该信息。

例如开玩笑

npm 安装 babel-plugin-module-resolver

并更新 .babelrc 以理解绝对路径

{
"plugins": [
[
"module-resolver",
{
"extensions": [".js", ".jsx"],
"root": ["./src"],
"alias": {
"root": ".",
"src": "/src"
}
}
]
]
}

关于javascript - webpack 看不到绝对路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55180192/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com