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

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();

更新：根据推荐，我需要在我的配置中添加resolve。现在看起来像这样：

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

很遗憾，我仍然遇到了这个问题:

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

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

- kawnah

---

你还没有尝试过我的Rollup示例，是吗？ :) 很抱歉再次打扰你，但它比你现在正在尝试让其正常工作的所有东西都要简单得多。 - Jake

我还没有，但我马上就要开始了。Webpack变得完全荒谬了。我会告诉你进展如何的！ :) - kawnah

Answer 1

每当你import/require一个模块时不指定文件扩展名，你需要告诉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

---

我已经将它包含在我的配置文件中，但仍然收到错误信息...会更新我的回答并展示我的配置文件是怎样的。 - kawnah

resolve 在我的配置文件中具体放在哪里？或者说位置无关紧要吗？ - kawnah

即使使用了resolve配置并且使用了./modules/toc，它仍然显示未找到。 - kawnah

好的，实际上是我的webpack配置入口出了问题。我需要把路径弄对。 - kawnah

Answer 2

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

如果您同时指定两次，gulp配置将告诉webpack获取位于./app/js/script.js的文件，然后webpack会在./app/js/script.js中获取该文件，从而导致路径变为./app/js/app/js/script.js。

如果您已修复，请告知我们。=)

- ChrisR

---

{btsdaf} - kawnah

{btsdaf} - ChrisR

{btsdaf} - kawnah

Answer 3

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

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

- ChrisR

---

我尝试了这个，但仍然出现解析错误...我的语法有误吗？我还尝试了 import {toc} from './modules/toc' toc(); - kawnah