未找到入口模块:错误:无法解决'./src/index.js‘

Question

我安装了一个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 }),
    ],
};

Answer 1

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

Answer 2

解决这个问题的另一个方法是使用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目录替换为要使用的另一个目录即可。

Answer 3

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