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

Gulp任务

//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

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

原文由 kawnah 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

如果指定两次，gulp 配置将告诉 webpack 获取文件 ./app/js/script.js 然后 webpack 获取文件 ./app/js/script.js 这将导致路径类似于 ./app/js/app/js/script.js

如果您修复了问题，请通知我们。 =)

原文由 ChrisR 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

每当你在没有指定文件扩展名的情况下导入/需要一个模块时，你需要告诉 webpack 如何解析它。这是由 webpack 配置中的 resolve 部分完成的。

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

作为一个经验法则：每当 webpack 抱怨没有解析模块时，答案可能就在 resolve 配置中。

让我知道任何进一步的问题，如果这有效。

编辑

resolve 直接到配置的根级别：

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

原文由 Rico Herwig 发布，翻译遵循 CC BY-SA 3.0 许可协议