找不到输入模块：错误：无法解析＆＃39; ./ src / index.js＆＃39;

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

您的基本网址为path.join(__dirname, "public")，您的参赛作品为./src/index.js。 Webpack尝试在./src/index.js dir中找到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

我遇到了同样的问题，发现这是由过去使用create-react-app在全局安装npm install -g create-react-app引起的。

由于现在不应该在全局范围内安装create-react-app，因此我需要先使用npm uninstall -g create-react-app卸载它，然后再使用npx create-react-app *my-app-name*将其安装在我的项目目录中。

Answer 4

输入路径相对于上下文。当您希望public/src/只查找/src中的路径时，它会在webpack.config.js中查找文件。看看<div class="form-group col-md-2"> {{ Form::label('from', null, ['class' => 'control-label']) }} <select name="from" class="selectpicker form-control mySel" multiple data-max-options="1" data-live-search="true" required="true"> <option value="1">Airport</option> </select> </div> <div class="form-group col-md-1"> <input type="button" value="swap" id="swap"> </div> <div class="form-group col-md-2"> {{ Form::label('to', null, ['class' => 'control-label']) }} <select name="to" class="selectpicker form-control mySel" multiple data-max-options="1" data-live-search="true" required="true"> @foreach($services as $key => $value) <option value="{{$value->id}}">{{ $value->location }}</option> @endforeach </select> </div> 的其余内容，您似乎根本不需要上下文行。

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

Answer 5

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

Answer 6

Webpack默认不查找.js文件。您可以配置resolve.extensions查找.ts。别忘了也添加默认值，否则大多数模块都会崩溃，因为它们依赖于自动使用.js扩展名的事实。

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

Answer 7

我的解决方案是将 App.js 文件放在 src 文件夹内的 components 文件夹中，并将 inde.js 放在 src 文件夹内