未找到入口module：错误：无法解析“./src/index.js”

IT技术 javascript reactjs webpack
2021-03-31 01:16:38

我正在安装一个 react 启动应用程序并添加了 Webpack，但它显示Can't resolve './src/index.js'.

浏览器显示 我的应用程序给出了这个外观

我的文件路径和 Package.json 内容 在此处输入图片说明

Webpack.config.js内容

 var debug = process.env.NODE_ENV !== "production";
    var webpack = require('webpack');
    var path = require('path');

    module.exports = {
        context: path.join(__dirname, "public"),
    devtool: debug ? "inline-sourcemap" : false,
    entry: "./src/index.js",
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2016', 'stage-0'],
                    plugins: ['react-html-attrs', 'transform-decorators-legacy', 'transform-class-properties'],
                }
            }
        ]
    },
    output: {
        path: __dirname + "/public/",
        filename: "build.js"
    },
    plugins: debug ? [] : [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
    ],
};
6个回答

您的基本 URL 是path.join(__dirname, "public")，您的条目是./src/index.js。Webpack 尝试./src/index.js在publicdir 中查找；显然它不存在。您应该修改entry为../src/index.js.

谢谢@kermitERROR in ./src/index.js Module build failed: Error: Couldn't find preset "es2016" relative to directory "C:\\Users\\ashik\\Desktop" 但我收到新错误
2021-05-27 01:16:38
在我的情况下使用 .. 在类似的导入错误中工作，谢谢！
2021-05-29 01:16:38

我发现解决此问题的另一种方法是使用path.resolve().

const path = require('path');
module.exports = {
    mode: "production",
    entry: path.resolve(__dirname, 'src') + 'path/to/your/file.js',
    output: {
        /*Webpack producing results*/
        path: path.resolve(__dirname, "../src/dist"),
        filename: "app-bundle.js"
    }
}

这将确保 webpack 正在src目录中寻找入口点。

顺便说一下，它是默认入口点。您还可以将此入口点更改为您合适的位置。只需将该src目录替换为您要使用的其他目录即可。

我的 webpack.config.js 被命名为 Webpack.config.js 并且新的 cli 正在寻找区分大小写的东西。

默认情况下，Webpack 不会查找 .js 文件。您可以配置 resolve.extensions 来查找 .ts。不要忘记添加默认值，否则大多数module都会中断，因为它们依赖于自动使用 .js 扩展名的事实。

resolve: {
    extensions: ['.js', '.json']
}

入口路径是相对于上下文的。它寻找一个文件public/src/时，你想让它在短短的路径/src。看看你的其余部分，你webpack.config.js似乎根本不需要上下文行。

https://webpack.js.org/configuration/entry-context/

其它你可能感兴趣的问题
上一篇人们如何使用 react-router v4 处理滚动恢复？ 下一篇Next.js 加载 <script> 标签但不执行它们