Webpack - 尽管模块存在，但找不到模块

Question

This is a branch off of my previous question and applied suggestions。但我仍然有重大问题。

我现在有我的babel transpiler，以及.babelrc文件。我的导入代码导入我的模块如下所示：

var init = require('./app/js/modules/toc'); 
init(); 

但是我得到这个：

ERROR in ./app/js/script.js 
Module not found: Error: Cannot resolve 'file' or 'directory' ./app/js/modules/toc in /projects/project-root/app/js 
@ ./app/js/script.js 1:11-42 

的WebPack配置：

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

module.exports = { 
    context: __dirname, 
    devtool: debug ? "inline-sourcemap" : null, 
    entry: "./app/js/script.js", 
    module: { 
    rules: [{ 
     test: /\.js$/, 
     use: 'babel-loader' 
    }] 
    }, 
    output: { 
    path: __dirname + "public/javascripts", 
    filename: "scripts.min.js" 
    }, 
    plugins: debug ? [] : [ 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 
    ], 
}; 

.babelrc

{ 
    "presets": ["es2015"] 
} 

Gulptask

//scripts task, also "Uglifies" JS 
gulp.task('scripts', function() { 
    gulp.src('app/js/script.js') 
    .pipe(webpack(require('./webpack.config.js'))) 
    .pipe(gulp.dest('public/javascripts')) 
    .pipe(livereload()); 
}); 

我完全失去了......我做错了什么？

对于我的导入代码我也试过：

import {toc} from './modules/toc' 
toc(); 

更新：由于建议我需要解决添加到我的配置。现在看起来是这样的：

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

module.exports = { 
    context: __dirname, 
    devtool: debug ? "inline-sourcemap" : null, 
    entry: "./app/js/script.js", 
    resolve: { 
    extensions: ['.js'] 
    }, 
    module: { 
    rules: [{ 
     test: /\.js$/, 
     use: 'babel-loader' 
    }] 
    }, 
    output: { 
    path: __dirname + "public/javascripts", 
    filename: "scripts.min.js" 
    }, 
    plugins: debug ? [] : [ 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 
    ], 
}; 

可悲的是我仍然得到：

ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./app/js/script.js in /projects/project-root

难道我的文件结构需要改变吗？

Answer 1

你指定你的WebPack Config中和大口的入口点。在您的webpack配置中删除entry属性。

如果指定了两次，gulp配置会告诉webpack获取中的文件，然后是webpack中的，这将导致像./app/js/app/js/script.js这样的路径。

如果您修复了我们，请继续发帖。 =）

Answer 2

鉴于您的脚本位于，并且请求的模块有./app/js/modules/toc，您需要相对于脚本调用它=>./modules/toc应该可以工作。

这是因为您的脚本和模块都位于js文件夹中。

Answer 3

每当您输入/需要一个模块而没有指定文件扩展名时，您需要告诉webpack如何解决它。这由webpack config中的resolve部分完成。

resolve: { 
    extensions: ['.js'] // add your other extensions here 
} 

作为一个经验法则：每当的WebPack抱怨不解决模块，答案可能在于resolve配置。

让我知道任何进一步的问题，如果这个工程。

编辑

resolve直接到你的配置的根级：

// webpack.config.js 
module.export = { 
    entry: '...', 
    // ... 
    resolve: { 
    extensions: ['.js'] 
    } 
    // ... 
};