Webpack - 即使模块存在，也找不到模块

Question

这是我之前的问题和应用建议的一个分支。但我仍然有重大问题。

我现在有了我的 babel 转译器，以及一个.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

网络包配置：

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"]
}

吞咽任务

//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 }),
  ],
};

可悲的是我仍然得到：

未找到输入模块中的错误：错误：无法解析 /projects/project-root 中的“文件”或“目录”./app/js/script.js

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

Answer 1

每当你导入/需要一个模块而不指定文件扩展名时，你需要告诉 webpack 如何解决它。这是由resolvewebpack 配置中的部分完成的。

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

根据经验：每当 webpack 抱怨无法解析模块时，答案可能在于resolve配置。

让我知道任何其他问题以及这是否有效。

编辑

resolve 直接到您的配置的根级别：

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

Answer 2

您正在 webpack 配置和 gulp 中指定一个入口点。删除entrywebpack 配置中的属性。

如果指定两次，gulp 配置将告诉 webpack 获取文件./app/js/script.js，然后 webpack./app/js/script.js会生成类似./app/js/app/js/script.js.

如果您修复了它，请随时通知我们。=)