Question

我正在尝试为我的react应用设置webpack配置。我的文件夹结构是：

|--App
  |--webpack.config.js
  |--package.json
  |--src
    |--index.js
    |--Components
      |--Test.js

webpack.config.js

中的代码

const path = require('path');
const webpack = require('webpack');
var DESTINATION_PATH = path.resolve(__dirname, 'Build');
var SOURCE_PATH = path.resolve(__dirname, 'src');

module.exports = {
    context: SOURCE_PATH,
    entry: path.join(SOURCE_PATH + '/index.js'),
    output: {
        path: DESTINATION_PATH,
        filename: 'main.bundle.js'
    },
    module: {
        rules: [
            { test: /\.css$|\.scss$/, loader: ['style-loader', 'css-loader'] },
            { test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.eot$/, loader: "url-loader" },
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    presets: ["@babel/preset-env", "@babel/react"]
                }
            }
        ]
    },
    mode: 'development',
    resolve: {
        alias: {
            path: path.resolve(__dirname, 'src')
        },
        extensions: [".js", ".json", ".jsx"]
    }
};

index.js 中的代码：

import React from 'react';
import ReactDOM from 'react-dom';
import Test from 'Component/Test';

ReactDOM.render(<Test/>, document.getElementById('root'));

在控制台中运行webpack命令时，出现以下错误：

Error: Module not ERROR in ./index.js
Module not found: Error: Can't resolve 'Component/Test' in 'F:\DirName\Solution\POC2\src'

我还尝试使用插件dotenv-webpack进行.env配置。仍然会出现相同的错误。

我想我无法在webpack.config中正确地形成路径。

Answer 1

您的基本URL似乎是：path.join(__dirname, "src")，但是webpack正在app中寻找文件。您应该尝试将SOURCE_PATH更改为在./app/src中查找。或者./../app/src。

由于您认为上述内容不清楚...

更改：var SOURCE_PATH = path.resolve(__dirname, 'src');

收件人：var SOURCE_PATH = path.resolve(__dirname, './app/src');

或者：var SOURCE_PATH = path.resolve(__dirname, './../app/src');

由于您不会发布app.js文件，因此我无能为力。

webpack无法检测到绝对路径别名

1 个答案: